JQuery - Ajax总结

且.为.乐

已于 2023-04-24 13:40:20 修改

阅读量167

点赞数 1

分类专栏： # Jquery 文章标签： ajax jquery javascript php

于 2023-03-24 15:25:14 首次发布

本文链接：https://blog.csdn.net/JUN_7777/article/details/129745647

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 接口

1.1 get 和 post 的求别

GET和POST最本质的区别是规范上的区别：

定义GET请求是用来获取资源的，也就是进行查询操作的；
POST请求是用来传输实体对象的，因此会使用POST来进行添加、修改和删除等操作。

1.2 JQuery - Ajax 方法总览

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

方法	描述
`$.ajax()`	执行异步`AJAX`请求
`$.get()`	使用`AJAX HTTP GET`请求从服务器加载数据
`$.post()`	使用`AJAX HTTP POST`请求从服务器加载数据
`load()`	从服务器加载数据，并将返回的数据放入所选元素
`serialize()`	将一组表单元素编码为字符串以便提交

2 常用方法

2.1 jQuery - $.ajax() 方法

(1) 定义和用法：$.ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 $.ajax() 方法。该方法通常用于其他方法不能完成的请求。

(2) 语法：

$.ajax({name:value, name:value, ... })

(3) 常用参数

名称	描述	参数类型
`async`	表示请求是否异步处理。默认是 `true`	`bool`
`type`	规定请求的类型（`GET` 或 `POST`）	`string`
`dataType`	预期的服务器响应的数据类型，如`json`	`string`
`url`	规定发送请求的 URL	`string`
`data`	规定要发送到服务器的数据	`object`
`success`	请求成功时调用此函数	`function`
`error`	请求失败时调用此函数	`function`
`beforeSend(xhr)`	发送请求前运行的函数	`function`
`complete(xhr,status)`	请求完成时运行的函数（在请求成功或失败之后均调用，即在 `success` 和 `error` 函数之后）	`function`

2.2 举例 - Ajax 和 php 后台交互

现有一个table表单，根据ajax返回参数。

页面和Ajax代码如下：

<script>
    function getDataDetail(val){
    // 打印 去找bug的方法
    //console.log(var);
        var score = $(val).parent().siblings().eq(2).text();
        $.ajax({
            type: 'post',
            // dataType: 'json',
            url: 'controller.php', // //同目录下的php文件
            data:{
                score:score
            },
            beforeSend:function(){
                console.log(score);
            },
            success: function(data) {
                var result = (data == 'success') ? "准许" : "不准许";
                $(val).parent().siblings().eq(3).text(result);
            }
        });

    }

</script>
<style>
  table {
    margin: 100px auto;
  }
</style>
<body>
   <table class="table table-striped w-50 p-3 col-sm-12">
    <thead>
        <tr>
            <th class="col-sm-2"> NO. </th>
            <th class="col-sm-2"> User Name </th>
            <th class="col-sm-2"> Computer Score</th>
            <th class="col-sm-2"> 准许毕业 </th>
            <th class="col-sm-2"> 检索成绩 </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th> 1. </th>
            <th> Jack </th>
            <th> 100 </th>
            <th> </th>
            <th>  <input class="btn btn-primary pull-right btn-left" type="submit" value="Submit" onclick="getDataDetail(this)" > </th>
        </tr>
        <tr>
            <th> 2. </th>
            <th> Lisa </th>
            <th> 70 </th>
            <th> </th>
            <th>  <input class="btn btn-primary pull-right btn-left" type="submit" value="Submit" onclick="getDataDetail(this)"> </th>
        </tr>
        <tr>
            <th> 3. </th>
            <th> Mary </th>
            <th> 59 </th>
            <th> </th>
            <th>  <input class="btn btn-primary pull-right btn-right" type="submit" value="Submit" onclick="getDataDetail(this)"> </th>
        </tr>
    </tbody>
   </table>
</body>

controller.php

<?php
   $score = $_REQUEST['score'];
   $data = ($score >=60) ? "success" : "error";
   echo($data);
?>

运行结果是在准许毕业的表单中填充内容。
在这里插入图片描述

2.3 ajax中dataType类型详解

2.3.1 关于json的讨论

(1) dataType 为json类型时
值得注意的是：这个地方不是json对象，是json字符串，从后台返回的参数形式。

依旧参照上述的例子：
首先先不添加dataType，dataType如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。

        $.ajax({
            type: 'post',
            url: 'controller.php', 
            data:{
                userName:userName,
                score:score
            },
            success: function(data) {
                console.log(data);
            }
        });

后台输出 echo($_REQUEST); 打印后，会报错

<b>Notice</b>:  Array to string conversion in

这是因为把数组当成字符串来使用了，解决方案就是将数组转换成字符串再使用：比如使用json_encode($arr)函数。

因此修改代码：

        $.ajax({
            type: 'post',
            dataType: 'json',
            url: 'controller.php',
            data:{
                userName:userName,
                score:score
            },
            success: function(data) {
                console.log(data);
            }
        });

后台代码如下处理：

<?php
   $arr = json_encode($_REQUEST);
   echo($arr);
?>

运行结果如下：
在这里插入图片描述

2.3.2 返回纯文本

dataType:'text' :返回纯文本字符串。
在这里插入图片描述

2.4 form表单传值

2.4.1 概念和使用

除了上述的样例，其实也可以用 form 进行数据传输。

属性介绍


`name`	表单名称
`action`	处理表单提交的 `URL`
`method`	`post/get`

例子如下
在这里插入图片描述

<body>
    <form class="form-horizontal myform" method="get" action="demo.php" id="myform">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-5">
        <input type="text" class="form-control" id="inputName" placeholder="Name" name="name">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-5">
        <input type="password" class="form-control" id="inputPassword" placeholder="Password" name="password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label>
            <input type="checkbox"> Remember me
            </label>
        </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" >Sign in</button>
        </div>
    </div>
    </form>
</body>