Ajax中利用jQuery简单实现异步交互

最新推荐文章于 2022-12-07 18:01:22 发布

半个灵魂

最新推荐文章于 2022-12-07 18:01:22 发布

阅读量624

点赞数

分类专栏： Ajax 文章标签： jquery ajax callback html constructor string

本文链接：https://blog.csdn.net/zhaom_916/article/details/7366517

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

function verify(){
//	alert("被点击了。。。。。。。");
	
	//得到id为loginName的标签对象
	var jqObject = $("#loginName");
	//得到文本框中的值
	var name = jqObject.val();
	//用JQ中的$.get()方法去访问服务器
	/*JQ中的get方法接受的参数
	 * get(url, [data], [callback], [type])
	 * url 待载入页面的URL地址
	 * data (可选) 待发送 Key/value 参数。
	 * callback (可选) 载入成功时回调函数。
	 * type (可选) 返回内容格式，xml, html, script, json, text, _default。
	 */
	$.get("AjaxTestServlet?loginName=" + name,null,callback);
}

//从服务器返回来的数据封装在callback函数的参数中
function callback(data){
	alert(data);
}

主页html为如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="verify.js"></script>
</head>
<body>
	<form name="form1" action="AjaxTestServlet" method="POST">
		请输入注册用户名： <input name="loginName" type="text" id="loginName">
		<input type="button" name="checkLoginName" value="有效性检查"
			οnclick="verify()"><br>
	</form>
</body>
</html>

接受的响应的服务器端的程序为AjaxTestServlet

import java.io.IOException;
import java.io.PrintWriter;

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

/**
 * Servlet implementation class AjaxTestServlet
 */
@WebServlet("/AjaxTestServlet")
public class AjaxTestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxTestServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(request,response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// post按doGet()方法处理
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		//这里假设已经注册过了四位用户
		String[] logined = {"admin","users","dywdyw","zhaom_916"};
		//接收从客户端提交的loginName参数
		String loginName = request.getParameter("loginName");
		//创建一个存放响应内容的字符串
		String responseContext = "true";
		for (int i=0;i<logined.length;i++){
			//遍历已注册用户列表，如果发现提交的注册名已存在，则修改响应内容
			if (loginName.equals(logined[i]))responseContext = "false";
		}
		//将处理结果返回给客户端
		out.println(responseContext);
		out.flush();
		out.close();
	}

}

中间遇到过一个小问题就是要求js与html的编码一致不然会出现乱码

半个灵魂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax中利用jQuery简单实现异步交互

function verify(){// alert("被点击了。。。。。。。"); //得到id为loginName的标签对象 var jqObject = $("#loginName"); //得到文本框中的值 var name = jqObject.val(); //用JQ中的$.get()方法去访问服务器 /*JQ中的get方法接受的参数 * get(url, [da
复制链接

扫一扫