学习Ajax提交Json数据

POST提交

原生js实现

<script>
var oStr = '';
var postData = {};
var oAjax = null;
//post提交的数据
postData = {"name1":"value1","name2":"value2"};
//这里需要将json数据转成post能够进行提交的字符串  name1=value1&name2=value2格式
postData = (function(value){
　　for(var key in value){
　　　　oStr += key+"="+value[key]+"&";
　　};
　　return oStr;
}(postData));
//这里进行HTTP请求
try{
　　oAjax = new XMLHttpRequest();
}catch(e){
　　oAjax = new ActiveXObject("Microsoft.XMLHTTP");
};
//post方式打开文件  x='+Math.random()为了解决浏览器缓存问题 true是否同步和异步
oAjax.open('post','服务器地址?x='+Math.random(),true);
//post相比get方式提交多了个这个
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//post发送数据
oAjax.send(postData);
oAjax.onreadystatechange = function(){
　　//当状态为4的时候，执行以下操作
　　if(oAjax.readyState == 4){
　　　　try{
　　　　　　alert(oAjax.responseText);
　　　　}catch(e){
　　　　　　alert('你访问的页面出错了');
　　　　};
　　};
};
</script>

​

jquery实现

/*$.post(URL,data,callback);*/
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("地址",
    {
      name:"Donald Duck",
      city:"Duckburg"
    },
    function(data,status){
      alert("数据：" + data + "\n状态：" + status);
    });
  });
});
</script>

GET提交

js get提交

                           var xmlHttpRequest = null;
                            //1、创建XMLHttpRequest对象
                            if (window.XMLHttpRequest) {//新版本返回为TRUE
                                xmlHttpRequest = new XMLHttpRequest();
                            } else {
                                xmlHttpRequest = new ActiveXObject(
                                        "Microsoft.XMLHTTF");
                            }
                            //2、设置回调函数
                            xmlHttpRequest.onreadystatechange = callBack;
                            var username = $("#username").val();
                            //3、初始化XMLHttpRequest组件
                            var url = "UserServlet?username=" + username;
                            xmlHttpRequest.open("GET", url, true);
                            //4、发送请求
                            xmlHttpRequest.send(null);
                            //回调函数callBack的编写
                            function callBack() {
                                if (xmlHttpRequest.readyState == 4
                                        && xmlHttpRequest.status == 200) {
                                    var data = xmlHttpRequest.responseText;
                                    if (data == "true") {
                                        $("#errMsg").html("用户名已被注册");
                                    } else {
                                        $("#errMsg").html("用户可以注册");
                                    }
                                }
                            }
                        });

jquery实现

/*$.get(URL,callback);*/
<script>
$(document).ready(function(){
  $("button").click(function(){
/*可以在地址后面跟参数就行了*/
    $.get("地址",function(data,status){
      alert("数据：" + data + "\n状态：" + status);
    });
  });
});
</script>