ajax同步和异步和ajax的格式

最新推荐文章于 2023-06-06 13:53:52 发布

小杨同学呀呀呀呀

最新推荐文章于 2023-06-06 13:53:52 发布

阅读量140

点赞数

分类专栏： ajax 前端文章标签： ajax的格式 get请求 post请求同步和异步

本文链接：https://blog.csdn.net/weixin_45522071/article/details/103449231

版权

前端同时被 2 个专栏收录

34 篇文章 4 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

ajax技术

一、ajax初识

我们平常上网，其本质就是通过客户端向服务器发送请求，服务器接到请求后返回处理后的数据给客户端；我们以前向服务器提交数据典型的应用是就是 form 表单，但是页面会进行跳转，如果不想让页面跳转还能把数据发送给服务器就是使用ajax技术。

  AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 
  可以在不刷新整个页面的情况下和服务器进行局部的数据交互。

二、同步和异步

     同步是指：当程序1调用程序2时，程序1停下不动，直到程序2完成回到程序1来，程序1才继续执行下去。
     异步是指：当程序1调用程序2时，程序1径自继续自己的下一个动作，不受程序2的的影响。

三、json格式

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。

在这里插入图片描述
json_encode() 这个函数的功能是将数值转换成json数据存储格式。

这是返回的json格式的数据

四、get方式查询信息案例

在这里插入图片描述
现在我们在页面中让用户在输入框中输入城市，然后我们把数据表中是这些城市的学生信息查询出来。

html中代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>请查询出家庭住址是保定的学生信息</h3>
家庭住址：<input type="text" id="city">
<input type="button" id="btn" value="查询">
<div id="box"></div>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function () {
        var city=document.getElementById("city").value;
        var xhr=new XMLHttpRequest();
        //参数1是请求方式 参数2是请求地址get可以拼接参数 
		//参数3是true/false 一般省略 默认是true是异步
        xhr.open("get","02.php?city="+city);
        xhr.send();
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
//                JSON.parse()把json字符串转换成对象 前端方便获取数据
                var obj=JSON.parse(xhr.responseText);
                var box=document.getElementById("box");
                var html='';
                for(var i=0;i<obj.length;i++){
                    html+=obj[i].name+obj[i].city;
                    box.innerHTML=html;
                }

                console.log(obj);
            }
        }

    }
</script>
</body>
</html>

php代码如下：

<?php
$city=$_GET['city'];
$con=mysqli_connect('localhost','root','root');
if(!$con){
    die('连接失败');
}
mysqli_select_db($con,'test');
mysqli_set_charset($con,'utf8');
$sql="select * from student where city='$city'";
$res=mysqli_query($con,$sql);
$arr=[];
while($row=mysqli_fetch_assoc($res)){
    $arr[]=$row;
}
//由于前后台交互都是通过字符串传输的，所以把数组转换成json字符串
echo json_encode($arr);

所以最终显示效果如下：

五、post发送数据

html中代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>请查询出家庭住址是保定的学生信息</h3>
家庭住址：<input type="text" id="city">
<input type="button" id="btn" value="查询">
<div id="box"></div>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function () {
        var city=document.getElementById("city").value;
        var xhr=new XMLHttpRequest();
        xhr.open("post","03.php");
        //post方式必须设置请求头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//        post方式发送的数据在send()
        xhr.send("city="+city);
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
//                console.log(xhr.responseText);
                var obj=JSON.parse(xhr.responseText);
                var box=document.getElementById("box");
                var html='';
                for(var i=0;i<obj.length;i++){
                    html+=obj[i].name+obj[i].city;
                    box.innerHTML=html;
                }
            }
        }

    }
</script>
</body>
</html>

.php中代码如下：

<?php
$city=$_POST['city'];
$con=mysqli_connect('localhost','root','root');
if(!$con){
    die('连接失败');
}
mysqli_select_db($con,'test');
mysqli_set_charset($con,'utf8');
$sql="select * from student where city='$city'";
$res=mysqli_query($con,$sql);
$arr=[];
while($row=mysqli_fetch_assoc($res)){
    $arr[]=$row;
}
//由于前后台交互都是通过字符串传输的，所以把数组转换成json字符串
echo json_encode($arr);

注意事项： post请求的方式的参数不能在请求地址后面拼接，post请求必须设置请求头。

六、jquery封装ajax

1、封装get请求

html中代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>请查询出家庭住址是保定的学生信息</h3>
家庭住址：<input type="text" id="city">
<input type="button" id="btn" value="查询">
<div id="box"></div>
<script src="jquery.min.js"></script>
<script>
    $("#btn").click(function () {
        var city=$("#city").val();
//        data是返回的数据 res是状态 success/error
        $.get("04.php?city="+city,function (data,res) {
//            console.log(JSON.parse(data));
            var arr=JSON.parse(data);
            var html='';
            for(var i=0;i<arr.length;i++){
                html+=arr[i].name+arr[i].city;
                $("#box").html(html);
            }

        })
    })
</script>
</body>
</html>

.php中代码如下：

<?php
$city=$_GET['city'];
$con=mysqli_connect('localhost','root','root');
if(!$con){
    die('连接失败');
}
mysqli_select_db($con,'test');
mysqli_set_charset($con,'utf8');
$sql="select * from student where city='$city'";
$res=mysqli_query($con,$sql);
$arr=[];
while($row=mysqli_fetch_assoc($res)){
    $arr[]=$row;
}
//由于前后台交互都是通过字符串传输的，所以把数组转换成json字符串
echo json_encode($arr);

备注：封装好的get的请求方式如下：$.get(“请求地址”,function(data,res){})

2、封装post请求

.html中代码如下

<h3>请查询出家庭住址是保定的学生信息</h3>
家庭住址：<input type="text" id="city">
<input type="button" id="btn" value="查询">
<div id="box"></div>
<script src="jquery.min.js"></script>
<script>
    $("#btn").click(function () {
        var city=$("#city").val();
        $.post("05.php",{"city":city},function (data) {
            var arr=JSON.parse(data);
            var html='';
            for(var i=0;i<arr.length;i++){
                html+=arr[i].name+arr[i].city;
                $("#box").html(html);
            }
        })
    })
</script>

php中代码如下：

<?php
$city=$_POST['city'];
$con=mysqli_connect('localhost','root','root');
if(!$con){
    die('连接失败');
}
mysqli_select_db($con,'test');
mysqli_set_charset($con,'utf8');
$sql="select * from student where city='$city'";
$res=mysqli_query($con,$sql);
$arr=[];
while($row=mysqli_fetch_assoc($res)){
    $arr[]=$row;
}
//由于前后台交互都是通过字符串传输的，所以把数组转换成json字符串
echo json_encode($arr);

3、封装$.ajax

请参考下面的链接 https://blog.csdn.net/Ha_Girl/article/details/90710491
语法如下：

$.ajax({
	type:"请求方式",
	url:"请求地址"，
	data:{},
	dataType:"返回的数据格式"，
	success:function(){
		响应成功后执行的代码;
	},
	error:function(){
		响应失败后执行的代码;
	}

})

html中代码如下：

<h3>请查询出家庭住址是保定的学生信息</h3>
家庭住址：<input type="text" id="city">
<input type="button" id="btn" value="查询">
<div id="box"></div>
<script src="jquery.min.js"></script>
<script>
    $("#btn").click(function () {
        var city=$("#city").val();
        $.ajax({
            type:"post",
            url:"06.php",
            data:{"city":city},
            dataType:"json",
            success:function (data) {
                console.log(data);
            },
            error:function(data){
                console.log(data);
            }
        })
    })
</script>

.php中代码如下：

$city=$_POST['city'];
$con=mysqli_connect('localhost','root','root');
if(!$con){
    die('连接失败');
}
mysqli_select_db($con,'test');
mysqli_set_charset($con,'utf8');
$sql="select * from student where city='$city'";
$res=mysqli_query($con,$sql);
$arr=[];
while($row=mysqli_fetch_assoc($res)){
    $arr[]=$row;
}
//由于前后台交互都是通过字符串传输的，所以把数组转换成json字符串
echo json_encode($arr);

小杨同学呀呀呀呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax同步和异步和ajax的格式

ajax技术一、ajax初识我们平常上网，其本质就是通过客户端向服务器发送请求，服务器接到请求后返回处理后的数据给客户端；我们以前向服务器提交数据典型的应用是就是 form 表单，但是页面会进行跳转，如果不想让页面跳转还能把数据发送给服务器就是使用ajax技术。 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 ...
复制链接

扫一扫