zoukankan      html  css  js  c++  java
  • jquery下php与ajax的互传数据(json格式)自我总结

    研究了一整天的json数据与ajax的数据传输,现在进行一个小的自我总结,仅供参考

    1.关于ajax的认识

         $.ajax(),是jquery下包装好的一个函数:参考地址http://www.w3school.com.cn/jquery/ajax_ajax.asp

        使用其跟php段进行通信。

    //方法一:使用jquery包装好的$.AJAX()函数来实现,接下来的php代码也是根据该放松来写的

    <script type="text/javascript">
      //jquery直接进行ajax的包装调用
           $(function(){     
             
                $("#subbtn").click(                     
                        function(){
                                 //单引号+value没有括号
                            var name=document.getElementById('name').value;                  
                            var email=document.getElementById('email').value;
                            var content=document.getElementById('content').value;                                                            
                            var params={
                                    "one":[{"name":name,"email":email,"content":content},{"name":"test","email":"test","content":"test"}],
                                    "two":[{"name":"test1","email":"test2","content":"test2"},{"name":"test3","email":"test3","content":"test3"}]
                                            };                             
                            var url="deal.php";
                            $.ajax({
                                type:"post",
                                url:url,
                                data:params,
                                dataType:"json",
                                error:function()
                                {alert("error !")},
                                success:function(json){                              
                                     var back="<ul>";
                                     for(var i=0;i<(json.length);i++)
                                     {
                                         for(var j=0;j<json[i].length;j++)
                                             back+="<li>"+json[i][j]+"</li>";
                                     }         
                                      back+="</ul>";
                                     $("#backdata").html(back);
                                     $("#backdata").css({color:"green"});
                                }
                            });
                        });
            });    
        </script>

    //方法二:自己创建XMLHttpRequest对象实现ajax

    <script type="text/javascript">

        var xmlhttp;

       //创建XMLHttpRequest对象
        function creatXMLHttpRequest()
        {

            //非IE浏览器创建XmlHttpRequest对象
            if(window.XMLHttpRequest)
            {
              xmlhttp=new XMLHttpRequest();
            }
            //IE浏览器创建XmlHttpRequest对象
            if(window.ActiveXObject)
            {
                try{
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e){
                    try{
                        xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
                    }
                    catch(ex){}
                }
            }
        }

        //设置相应服务器后的回调函数
            function callbackhandle()
            {
                if(xmlhttp.readyState==4)
                    document.getElementById("").innerHTML="数据正在加载。。。";
                if(xmlhttp.status==200)
                {
                    document.write(xmlhttp.responseText);
                }
            }

            //向服务器发出请求

            function useXMLHttpRequest(url)
            {
                creatXMLHttpRequest();
                if(!xmlhttp)
                {
                    alert("创建xmlhttp对象异常!");
                    return false;
                }
                xmlhttp.open("POSY",url,true);
                xmlhttp.onreadystatechange=callbackhandle();
                xmlhttp.send();
            }

          //客户端利用该函数进服务的请求调用
            function requestDigit()
            {
                var usname=document.getElementById().valueOf();
                var url="";
                useXMLHttpRequest(url);
            }

    </script>
     

    PHP段代码:利用jquery下包装的$.ajax()方法来回传json格式的数据

    <?php

    $name=$_POST['one'];
    $email=$_POST['two'];
    //$content=$_POST['content'];
    $id=time();
    //echo json_encode($_POST);
    $conn=mysqli_connect('localhost', 'root','', 'guestbook');
    mysqli_query($conn,"SET NAMES 'utf8'");
    $s1=$name[0]["name"];
    $s2=$name[0]["email"];
    $s3=$name[0]["content"];
    $sql="insert into liuyan values('$id','$s1','$s2','$s3')";
    if(mysqli_query($conn, $sql))
    {   
      $ar=array();
      $one=array();
      $tow=array();
      $one[0]=$s1;
      $one[1]=$s2;  
      $tow[0]=$email[1]["name"];//按照数组的访问方式,可以换成其他下标,仅作测试使用
      $tow[1]=$email[1]["email"];  
      $ar[0]=$one;
      $ar[1]=$tow;
      echo json_encode($ar);
    }else
    {
     echo 'DFDFDFDFDFD';//可以直接回传字符串,但是前面的现实的代码需要改一下,本人没有进行更改
     
    }
     mysqli_close($conn);
    ?>

    json的数据格式参考:http://baike.baidu.com/link?url=DexXfOk-Dt2rCSYz3oe8FhYXGAsHH5Jh_MUm3YopvoRT80-le_iXQoIMtdOj5jWU4FLRVPRLB6Xuca9xzezebq

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    varpeople={"programmers":[{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
    {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
    {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
    ],
    "authors":[
    {"firstName":"Isaac","lastName":"Asimov","genre":"sciencefiction"},
    {"firstName":"Tad","lastName":"Williams","genre":"fantasy"},
    {"firstName":"Frank","lastName":"Peretti","genre":"christianfiction"}
    ],
    "musicians":[
    {"firstName":"Eric","lastName":"Clapton","instrument":"guitar"},
    {"firstName":"Sergei","lastName":"Rachmaninoff","instrument":"piano"}
    ]}
  • 相关阅读:
    MySQL的事务和视图
    MySQL中的常用函数
    高级查询(一)
    街道管理系统
    深入.NET平台和C#编程的错题
    appium python下的API方法
    Charles 使用教程
    appium,iOS下,ios_predicate等定位方式
    Linux -常用命令
    python-列表以及相关函数认识
  • 原文地址:https://www.cnblogs.com/fengting/p/4201784.html
Copyright © 2011-2022 走看看