前端使用ajax进行异步请求

原生ajax代码

    /*执行ajax异步加载*/
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp=new XMLHttpRequest();
        }else{
            /*IE6 IE5创建ajax对象*/
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }    
        /*向服务器发送请求*/
        xmlhttp.open("POST","/scripte/ajax.php",true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8"); /*填写http头部信息*/
        xmlhttp.send("text="+text.value);/*发送post表单字符*/
        xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }

基于jquery实现的ajax代码

<script>
$("form").on('submit',function(e){
    /*e.preventDefault()*/
    var formData=$(this).serialize() //input 没加那么属性的错误
            $.ajax({
            url:"/student/test",
            async:true,
            data:formData,
            dbType:"json",
            type:"POST",
            success:function(result,status,xhr){
            /*alert(result)
            alert(status)
            alert(xhr)*/
        }});

    });
</script>

preventDefault()函数会组织默认事件的发生，这里主要是在测试过程中不让表单进行跳转
使用on函数来对表单绑定提交事件
serialize函数将表单中input的内容进行序列化，这里我在处理过程中input标签没有加name属性所以一直得不到数据
接下来就是执行ajax方法进行异步请求啦！

对了有的jquery版本还没有ajax函数,就用这个版本吧

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

原来并不是版本的问题，是由于scripte标签中多了两个关键字导致延迟没有完成就报错了
```
async defer  //异步延迟加载 md坑死我了
```

参考： https://www.runoob.com/jquery/ajax-ajax.html

Previous02定位 Nextgitbook

Last updated 5 years ago

/*执行ajax异步加载*/ var xmlhttp; if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else{ /*IE6 IE5创建ajax对象*/ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } /*向服务器发送请求*/ xmlhttp.open("POST","/scripte/ajax.php",true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8"); /*填写http头部信息*/ xmlhttp.send("text="+text.value);/*发送post表单字符*/ xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }

<script> $("form").on('submit',function(e){ /*e.preventDefault()*/ var formData=$(this).serialize() //input 没加那么属性的错误 $.ajax({ url:"/student/test", async:true, data:formData, dbType:"json", type:"POST", success:function(result,status,xhr){ /*alert(result) alert(status) alert(xhr)*/ }}); }); </script>