JQuery中的Ajax

最新推荐文章于 2024-03-13 07:00:00 发布

**瑱

最新推荐文章于 2024-03-13 07:00:00 发布

阅读量169

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/CDZAllier/article/details/103207885

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

万变不离其宗，格式不变，形不变

在使用Jquery的ajax需要引入jquery的js包：jquery-3.1.1.js 各种版本都可以

第一种

格式

$ . ajax({ url："服务器url地址"，

type：“请求类型”，

async：是否异步（true）同步(false)，

data：{变量：value }, //发送数据的值

success(respText){ //success成功接受服务器的函数,respText是从服务器的返回的值

}

)；

注：error 出现错误调用的函数

第二种

$ . post( "URL"，

{参数：值...}，

function(respTest){

更新

}

)；

第三种

$ . get( " URL ? 参数=值"，

function(respTest){

}

)；

例子

servlet代码

package com.cdz.ajax;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/ajax.do")
public class AjaxServlet extends HttpServlet{
	
	//重写doget，dopost
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//解决中文传过来的乱码
		req.setCharacterEncoding("UTF-8");
		resp.setContentType("text/html;charset=utf-8");
		//从封装好的js里拿发送过来的值
		String name=req.getParameter("name");
		//测试是否取到
		System.out.println("name="+name);
		resp.getWriter().print(name);
	}
}

html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
</head>
<body>
	<div id="div1" onclick="textAjax()"> 
		请求服务器
	</div>
	<script type="text/javascript">
		function textAjax(){
			$.ajax({url:"http://localhost:8088/demo922/ajax.do",
				type:"post",
				async:true,
				data:{name:"笨蛋"},
				success(respText){
					$("#div1").html(respText);
				}
			});
			//jquery,post
			//参数：url,发送数据的值，函数
/*			$.post("http://localhost:8088/demo922/ajax.do",
				{name:"猪儿"},
				function(respText){
					$("#div1").html(respText);
				}
			);
			//jquery,get
			//参数：url,发送数据的值，函数
			$.get("http://localhost:8088/demo922/ajax.do?name='狗儿'",
				function(respText){
					$("#div1").html(respText);
				}
			);*/
		}
	</script>
</body>
</html>

注：为了减少错误，这里要保证端口号正确，并且接收的值不为空，