jQuery对Ajax的支持

最新推荐文章于 2022-06-12 19:06:16 发布

好汉不吃草

最新推荐文章于 2022-06-12 19:06:16 发布

阅读量306

点赞数

分类专栏： Ajax异步交互文章标签： ajax jquery

本文链接：https://blog.csdn.net/Nicholas_GUB/article/details/106810548

版权

Ajax异步交互专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery对Ajax的支持

在jQuery中提供有$.ajax()方法，该方法有如下常用参数：

No	设置参数	描述
1	url	Ajax的执行处理路径
2	method	表示当前发出的Http请求模式，get或者post
3	data	向服务器传递的参数集合
4	dataType	服务器返回数据类型（text、json、xml、html、jsonp、script）
5	success	处理成功后执行的回调函数
6	error	请求失败时的处理函数

使用Ajax处理JSON数据

1.编写Servlet程序

package com.ajax.servlet;

import net.sf.json.JSONObject;

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;
import java.util.Enumeration;

@WebServlet(urlPatterns = "/test")
public class TestServlet extends HttpServlet {

    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        JSONObject obj = new JSONObject();
        Enumeration<String> enu = request.getParameterNames();
        while(enu.hasMoreElements()){
            String paramName = enu.nextElement();
            String paramValue = request.getParameter(paramName);
            obj.put(paramName,paramValue);
        }
        response.getWriter().print(obj.toString());
    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

2.编写页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#age").on("change",function(){
                $("#ageMsg").text($("#age").val());
            });
            $("#sendBut").on("click",function(){
                $.ajax({
                    url:'test',
                    method:'post',
                    data:{
                        name:$('#name').val(),
                        age:$('#age').val()
                    },
                    dataType:'json',
                    success:function(data){
                        $('#showDiv').append('<p>姓名：'+data.name+'\t年龄：'+data.age+'</p>');
                    },
                    error:function(){
                        window.console.log('发生了错误！！！');
                    }
                });
            });
        });
    </script>
</head>
<body>
<div id="showDiv"></div>
<div>
    <label>姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名" autofocus/><br>
    <label>年龄：</label>
    <input type="range" id="age" name="age" min="0" max="100" />
    <span id="ageMsg"></span><br>
    <input type="button" id="sendBut" value="发送" />
</div>
</body>
</html>

运行效果如下所示：

分别处理get与post请求

为了帮助用户简化代码，jQuery还提供有两个简短的函数：

处理GET请求：$.get(请求地址,{参数:内容...},回调函数,'json|text|xml'};
处理POST请求：$.post(请求地址,{参数:内容...},回调函数,'json|text|xml'};
对以上页面操作，可以用一下程序简化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#age").on("change",function(){
                $("#ageMsg").text($("#age").val());
            });
            $("#sendBut").on("click",function(){
                $.post('test',{
                    name:$('#name').val(),
                    age:$('#age').val()
                },function(data){
                    $('#showDiv').append('<p>姓名：'+data.name+'\t年龄：'+data.age+'</p>');
                },'json');
            });
        });
    </script>
</head>
<body>
<div id="showDiv"></div>
<div>
    <label>姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名" autofocus/><br>
    <label>年龄：</label>
    <input type="range" id="age" name="age" min="0" max="100" />
    <span id="ageMsg"></span><br>
    <input type="button" id="sendBut" value="发送" />
</div>
</body>
</html>

运行程序发现结果与以上用$.ajax()函数的一致。

好汉不吃草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对Ajax的支持

jQuery对Ajax的支持在jQuery中提供有$.ajax()方法，该方法有如下常用参数：No设置参数描述1urlAjax的执行处理路径2method表示当前发出的Http请求模式，get或者post3data向服务器传递的参数集合4dataType服务器返回数据类型（text、json、xml、html、jsonp、script）5success处理成功后执行的回调函数6error请求失败时的处理函数使用Ajax处理
复制链接

扫一扫

专栏目录