jquery实现的ajax

最新推荐文章于 2024-12-09 09:29:41 发布

weixin_30788239

最新推荐文章于 2024-12-09 09:29:41 发布

阅读量40

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qinyios/p/9915334.html

本文介绍了一个使用Ajax进行前后端数据交互的具体示例，包括前端如何发送POST请求到后端，以及后端如何接收并处理这些数据。同时展示了错误处理和请求完成状态的监控方法。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
	<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.3.1/jquery-3.3.1.js" ></script>

<script type="text/javascript">

function pp(){
	var name=$("#pp").val();
	alert(name);
	$.ajax({
		url:"ajax1",
		type:"POST",
		dataType: 'json',
		data:{name:name,age:12,sex:"man",address:"beijing"},
		// data:$("#formId").serialize()
		success:function(data){
			alert(data)
		},

		//=================== error============

		error: function (jqXHR, textStatus, err) {

			// jqXHR: jQuery增强的xhr
			// textStatus: 请求完成状态
			// err: 底层通过throw抛出的异常对象，值与错误类型有关
			console.log(err.toString());
		},

		//=================== complete============

		complete: function (jqXHR, textStatus) {
			// jqXHR: jQuery增强的xhr
			// textStatus: 请求完成状态 success | error
			console.log('statusCode: %d, statusText: %s', jqXHR.status, jqXHR.statusText);
			console.log('textStatus: %s', textStatus);
		},

		//=================== statusCode============
		statusCode: {
			'403': function (jqXHR, textStatus, err) {
				console.log(arguments);  //注意：后端模拟errror方式：HttpResponse.status_code=500
			},

			'400': function () {
			}
		}

	})


}



</script>
</head>
<body>
	p:<input type="text" name="p" id="pp"/>
	<input type="button" onclick="pp()" value="cl"/>
</body>
</html>

　　后端使用

RequestParam或者pojo接受

    @RequestMapping(value = "ajax1",method = RequestMethod.POST)
    @ResponseBody
    public String ajax1(ajax_pojo aj
//            @RequestParam("name")String name,
//                        @RequestParam("age")Integer age,
//                        @RequestParam("sex")String sex,
//                        @RequestParam("address")String address

    ){
        if(aj.getName().equals("zs")){
            return "true";
        }
        return "false";
    }

转载于:https://www.cnblogs.com/qinyios/p/9915334.html