ajax

发布时间：2020-12-16 02:59:16 所属栏目：百科来源：网络整理

导读：这是js原生的ajax： html： 1 ! DOCTYPE html 2 html 3 head 4 meta charset ="utf-8" / 5 title / title 6 / head 7 body 8 button onclick ="ajaxDemo()" ajax / button 9 / body 10 / html 11 !-- js原生的ajax -- 12 script 13 function ajaxDemo(){ 14

这是js原生的ajax：

html：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <button onclick="ajaxDemo()">ajax</button>
 9     </body>
10 </html>
11 <!--js原生的ajax-->
12 <script>
13     function ajaxDemo(){
14         //创建ajax对象
15         var xhr = new XMLHttpRequest();
16         //监听ajax的状态 到哪一步
17         xhr.onreadystatechange = function(){
18             if(xhr.readyState == 4){
19                 //数据处理
20                 alert(xhr.responseText);
21             }
22         }
23         //发送请求 get写null post写键值对
24         //xhr.open(‘GET‘,‘index.php?id=1‘);
25         xhr.open(‘POST‘,‘index.php‘);
26         //post传值这个东西必须写    post请求必须设置他的头信息
27         xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
28         var data = "id=1&type=add";
29         xhr.send(data);
30         
31         
32         
33         //xhr.send(null);
34     }
35     
36     
37 </script>

php：

<?php
echo $_GET[‘id‘];
?>

只用看看就可以，一般用juquery写ajax：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    </head>
    <body>
    </body>
</html>
<script>
    $.ajax({
        type:"post",//请求方式  不写默认get
        url:"index.php",//async:true,同步异步  默认是异步true
        data:{id:1,name:"lisi"},//数据
        dataType:‘text‘,//返回数据类型 不写默认text json xml
        success:function (data) {
            
        }
    });
</script>

ajax的两大优点是：1.不用刷新页面? 2.可以异步

可以将数据传送到后台并接收返回的数据，form表单只能将数据

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!