zoukankan      html  css  js  c++  java
  • Ajax异步(客户端测试)

    客户端测试:GET方法实现Ajax异步

    var request = new XMLHttpRequest();

                             request.open("GET","sever.php?number="+ document.getElementById("keyword").value);

                             request.send();

                            

                             request.onreadystatechange = function(){

                                      if(request.readyState === 4)

                                      {

                                              if(request.status === 200)

                                                {

                                                        //更新查询结果的内容

                                                        document.getElementById('search_result').innerHTML = request.responseText;

                                                        }

                                          else{

                                                      alert("发生错误"+ request.status)

                                                      }

                                              }

                             }

    Content-Type表示:数据的类型,如果设置错误,造成错误的信息

    POST 发送请求

    document.getElementById('savebtn').onclick=function(){

                             //发送请求

                             var request = new XMLHttpRequest();

                             var data = "name=" + document.getElementById('staffName').value

                                        +"&number=" + document.getElementById('staffNumber').value

                                                 +"&sex=" + document.getElementById('staffSex').value

                                                 +"&job=" + document.getElementById('staffJob').value

                             request.open("POST","sever.php?");

                     //

           设置请求头

            request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                             request.send(data);

                            

                             request.onreadystatechange = function(){

                                      if(request.readyState === 4)

                                      {

                                              if(request.status === 200)

                                                {

                                                        //更新查询结果的内容

                                                        document.getElementById('create_result').innerHTML = request.responseText;

                                                        }

                                          else{

                                                      alert("发生错误"+ request.status)

                                                      }

                                              }

                             }

                            

                            

                            

                             }

    6:JSON方式传送数据

    JSON存储交换信息的语法是javascript对象

    var json = '{"staff": [{"name": "张三","age": "10"},{"name": "张三","age": "20"}]}';

                                     

                                      var jsonobj = JSON.parse(json);//JSON字符串转换成javascript对象

                                      console.log(jsonobj.staff[0].name);

    可以使用现在校验工具直接检查JSON字符串的格式

    JSON的方式返回,在客户端需要进行转换,JSON.parse(),服务端不需要

    $result = '{"success":true,"msg":"找到员工:员工编号:' . $value["number"] .

                                                               ',员工姓名:' . $value["name"] .

                                                               ',员工性别:' . $value["sex"] .

                                                               ',员工职位:' . $value["job"] . '"}';

    通过字符串来传递数据

  • 相关阅读:
    nvelocity的Foreach 中使用DataTable数据
    好的博客链接收集
    Uber Shaders
    DOF
    纹理过滤模式中的Bilinear、Trilinear以及Anistropic Filtering
    开通博客了
    代码中的隐式转换问题
    使用C++/CLI封装引用BOOST库的DLL造成的问题
    在Free Radius的PAP认证过程中使用MD5密码
    (转)测试CPU是大端Big endian 还是小端Little Endian的C代码
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/9063791.html
Copyright © 2011-2022 走看看