jquery的函数实现Ajax

喜欢ヅ旅行 2022-11-29 13:19 162阅读 0赞

**Ajax实现方式**

1、$.ajax()

2、$.get()

3、$.post()

4、$.getJSON()

5、$("\#form1").serialize()

--------------------

### 1、$.ajax() ###

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。

**语法：**

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

**属性：**

<table> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>表示含义</td> 
  </tr> 
  <tr> 
   <td><strong>async </strong></td> 
   <td>布尔类型值，表示请求是否异步，默认值是true。可以不写</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>表示请求的地址</td> 
  </tr> 
  <tr> 
   <td> <p>type</p> </td> 
   <td>表示请求的类型 GET | POST</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td> <p>表示发送给服务器的数据&nbsp;</p> <p>格式有两种：</p> <p>1、name=value1&amp;age=value2</p> <p>2、{name:value1, age:value2}</p> </td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td> <p>请求成功，响应的回调函数</p> <p>success:function (data) { </p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //data是回调时传回来的参数<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert(data);//这个是响应服务器的处理结果<br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$("#result").text(data);<br> &nbsp;}</p> </td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>请求失败，响应的回调函数</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td>响应的数据类型&nbsp; 可以是JSON、test、xml，不过json比较使用多</td> 
  </tr> 
 </tbody> 
</table>

案例代码演示：

**html页面：**

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script>
            function doAjax(){
                $.ajax({
                    url:"bmiAjax",
                    type:"POST",
                    data:"name="+$("#name").val()+"&height="+$("#height").val()+"&weight="+$("#weight").val(),
                    success:function (data) {
                        alert(data);//这个是响应服务器的处理结果
                        $("#result").text(data);
                    },
                    error:function () {
                        alert("error！！！");
                    },
                    dataType:"json"
                })
            }
        </script>
    </head>
    <body>
        姓名: <input type="text"id="name" name="name"/><br/>
        体重（kg）<input type="text" id="weight" name="weight"/><br/>
        身高(米)<input type="text" id="height" name="height"/><br/>
        <input type="button" value="计算BMI"onclick="doAjax()">
        <div id="result">
    
        </div>
    </body>
    </html>

**servlet：**

package cn.com.Ycy.Ajav;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    @WebServlet("/bmiAjax")
    public class AjaxServlet extends HttpServlet {
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            super.doGet(req,resp);
        }
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            resp.setCharacterEncoding("utf-8");
            String name = req.getParameter("name");
            String weight = req.getParameter("weight");
            String height = req.getParameter("height");
            float w = Float.parseFloat(weight);
            float h = Float.parseFloat(height);
            float bmi = w / (h * h);
            String msg = "";
            if (bmi < 18.5) {
                msg = ""+name+"比较廋";
            } else if (bmi > 18.5 && bmi <= 23.9) {
                msg = ""+name+"的bmi是正常的";
            } else if (bmi <= 27 && bmi > 23.9) {
                msg =""+name+"比较胖";
            }else {
                msg=""+name+"特别胖哦";
            }
            System.out.println(msg);
            System.out.println("sbsb");
            resp.getWriter().write(msg);
        }
    }

### 2、$.get()  ###

<table> 
 <tbody> 
  <tr> 
   <td>属性</td> 
   <td>含义</td> 
  </tr> 
  <tr> 
   <td> <p>url</p> </td> 
   <td>表示请求的地址</td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td> <p>表示发送给服务器的数据&nbsp;</p> <p>格式有两种：</p> <p>1、name=value1&amp;age=value2</p> <p>2、{name:value1, age:value2}</p> </td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>请求成功，响应的回调函数</td> 
  </tr> 
  <tr> 
   <td>dataType</td> 
   <td>响应的数据类型&nbsp; 可以是JSON、test、xml，不过json比较使用多</td> 
  </tr> 
 </tbody> 
</table>

**更简化代码了**

### 3、$.post()  ###

代码演示

### 4、$.getJSON() ###

通过HTTP GET请求，请求载入JSON数据，请求方式和回调数据类型是固定的，请求方式是GET，数据返回是JSON格式

$.get()和$.post()都是四个参数而这个只要三个参数即可,代码演示

### 5、$("\#form1").serialize() ###

可以把表单的所有参数都获取到，并以name=value&age=value2的形式拼接起来

$("\#form1").serialize()需要都哪个表单绑定起来。