ajax 和 php 和 javascript（html）

获取表单内容
 var username = $("#username").val();
------------------------------------------------
ajax的调用
async：false   使用同步方式
cache:true


ajax 返回值是json类型,在php这边接收时,选择用php输入流php://input 获取原始的输入内容；结果值要用json_encode， 对变量进行 JSON 编码。


----------------------------------------------------------------
一，html发送数据，php接受数据


$.post('ajax.php',  //url    提交方式写在了开头
            {name:username,pwd:password},  //内容
            function(data)   //成功
            {








 $.ajax({         //调用
             url: "ajax.php",   //URL
             type: "POST",      //提交方式
             data:{name:username,pwd:password},   //内容
             dataType: "json",                  //格式
             error: function(){                 //如果调用php失败
                 alert('Error loading XML document');
             },
             success: function(data,status){//如果调用php成功
                alert(status);
                alert(data);
                $('.con').html("用户名:"+data[0]+"密码:"+data[1]);
             }
        });






  $.ajax({
             url: "ajaxTest2.php",
             type: "POST",
             data:{name:username,pwd:password},
             dataType: "json",
             //(默 认: 自动判断 (xml 或 html)) 请求失败时调用时间。
            //参数有以下三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。
            //如果发生了错误，错误信息（第二个参数）除了得到null之外，
            //还可能是"timeout", "error", "notmodified" 和 "parsererror"。


            //textStatus: "timeout", "error", "notmodified" 和 "parsererror"。
             error: function(XMLHttpRequest, textStatus, errorThrown){
                alert(XMLHttpRequest.status);
           /*     XMLHttpRequest.readyState: 状态码的意思
             0 － （未初始化）还没有调用send()方法
             1 － （载入）已调用send()方法，正在发送请求
             2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
             3 － （交互）正在解析响应内容
             4 － （完成）响应内容解析完成，可以在客户端调用了*/
                alert(XMLHttpRequest.readyState);
                alert(textStatus);
             },
             success: function(data,status){//如果调用php成功
                alert(status);
                alert(data);
                $('.con').html("用户名:"+data[0]+"密码:"+data[1]);
                 console.log(data[0]+data[1]);
             },
             //请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态
              complete: function(XMLHttpRequest, textStatus) {
              this; // 调用本次AJAX请求时传递的options参数
               console.log(this);
               }


        });




<?php
$name = $_POST['name'];
$pwd = $_POST['pwd'];
$array = array("$name","$pwd");
//这里进行一个些操作，比如数据库交互
echo json_encode($array);//json_encode方式是必须的
?>




传递到后台后，通过json_decode(data);来解码json。同样的可以查看解码的数据是否正确，则可以通过ajaxReturn()返回数据。




前台将数据封装起来，转成json串
data: {"testData" :JSON.stringify({test1: valu1,test2: valu2})},
后台解析json，将数据转换成 php 的数组
json_decode($_POST['testData'], true);


------------------------------------------------------------------------
二，html接收json文件，并进行遍历


data.json
[
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
},
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
},
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
}
]




getjson.html


<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//获取json的方法$.getJSON(url,[data],[callback])
$.getJSON("data.json",function(data){
var $jsontip = $("#jsonTip");
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data,function(infoIndex,info){
strHtml += "姓名："+info["name"]+"<br>";
strHtml += "性别："+info["phone"]+"<br>";
strHtml += "邮箱："+info["time"]+"<br>";
strHtml += "奖品："+info["prize"]+"<br>";
                                strHtml += "<hr>"
})
$jsontip.html(strHtml);//显示处理后的数据
})     })    })
</script>


<div class="loadTitle">
<input type="button" value="获取数据" id="btn"/>
</div>
<div id="jsonTip">
</div>


------------------------------------------------------------------------------
三， html 从php获取数据
*************************简单数据********************************
<?php
     $arr = array(
        'name' => 'myname',
         'jifen'=>'500',
          'num' => '1',
     );
     $json_string = json_encode($arr); //格式化
     echo "getProfile($json_string)";
 ?>


<label>名字：</label><div id="name"></div><br>
<label>积分：</label><div id="jifen"></div><br>
<label>次数：</label><div id="num"></div><br>
</body>
<script type="text/javascript">
 function getProfile(arr) {
     var arr = arr;
     document.getElementById('name').innerHTML = arr.name;
     document.getElementById('jifen').innerHTML = arr.jifen;
     document.getElementById('num').innerHTML = arr.num;
 }


 </script>
  //就是上面的php所在的文件
 <script type="text/javascript" src="ajaxTest.php"></script>
<script type="text/javascript" src="jquery.js"></script>




在php文件里，用json_encode()这个函数将返回二维数组格式化了，
javascript是用xmlHttp.responseText接收，接收后需要使用JavaScript的eval进行处理后，才是Json对象。
var obj_json = eval(xmlHttp.responseText);

*************************多维数据********************************

还没写