jQuery+Ajax implements refresh-free operation

jQuery+Ajax implements refresh-free operation_jquery

WBOY

Release： 2016-05-16 15:21:53

Original

1146 people have browsed it

Using jQuery to implement Ajax operations
I want to achieve the Ajax page without refresh effect, but it is a bit troublesome to use Ajax code directly, so I want to use jQuery to achieve it. jQuery nicely encapsulates the core object of Ajax, XMLHTTPRequest. So it is very convenient to use.
First, create the server-side code, here use Servlet to implement server-side data processing; the code is as follows:

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException {
 // 设置编码格式
  resp.setContentType("text/html;charset=UTF-8");
 // 创建输出对象
 PrintWriter out = resp.getWriter();
 
 // 得到请求参数
 String name = req.getParameter("uname");
 // 判断
 if (name == null || name.length() == 0)
 {
  out.println("用户名不能为空！");
 }
 else
 {
  // 判断
  if (name.equals("cheng"))
  {
  out.println("用户名["+ name +"]已存在！请使用其他用户名！");
  }
  else
  {
  out.println("用户名[" + name + "]尚未存在！您可以注册！");
  }
 }
}

Copy after login

Then, create a JSP page. To use jQuery, you must introduce the jQuery library, which is a Javascript file, into the page. In addition, you need to introduce a custom Javascript file, as follows:

<!-- 引入Javascript文件 -->
 <script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/verify.js"></script>

Copy after login

The JSP page only needs a text box, an ordinary button and a blank DIV layer. The DIV is used to display the processing results returned by the server; the click event of the button triggers the verify() method. As follows:

 <body>
 <center>
  用户名：<input type="text" id="uname" name="uname" />
 <br />
 <input type="button" name="btnVerify" value="验证" onclick="verify()" />
 <br />
 <div id="result">
 
 </div>
 </center>
 </body>

Copy after login

Note: There is no need to use a form to submit data in Ajax mode, so there is no need to write the

tag in the page.
Next, create a verify.js file and create the verify() method in the file to achieve the non-refresh effect of Ajax. This is the most important step in this example. If you want to use jQuery to implement Ajax, there are four steps:

· Get the content in the text box;
· Send the content in the text box to the server-side Servlet;
· Receive data returned by the server;
· Dynamically display the data returned by the server on the JSP page.

For the first step, first obtain the object through jQuery and obtain the value of the object, as follows:

 // 取得文本框对象,通过$()获取的所有对象都是jQuery对象
 var jQueryObject = $("#uname");
 // 获取文本框中的值
 var userName = jQueryObject.val();

Copy after login

Get the node of the page through the $() function in jQuery, which gets a jQuery object, and then get the value of the node through the val() method in jQuery, which is the content in the text box.
For the second step, we use jQuery’s get() method to send data to the server, as follows:
$.get("TestServlet?uname=" + userName,null,callback);
This method returns an XMLHttpRequest object. This method provides three parameters. The first is the URL of the server side of the request. The second parameter is the parameter to be sent. Generally, it can be included directly in the first URL. parameter, so generally this parameter is null. The third parameter is a callback function after the server successfully processes the data.
For the third step, you should create a callback function to process the data returned by the server, as follows:

 // 回调函数
 function callback(data)
 {
 
 }
 该回调函数有一个参数，该参数就是客户端返回的数据。
 针对于第四步，再次利用jQueyr的选择器函数得到DIV层，将返回的数据显示在该层之上，如下：
 function callback(data)
 {
 /**
 * 第三步，接收服务器端返回的数据
 */
 // 将服务器端返回的数据动态的显示在页面上
 var resultObject = $("#result");
 resultObject.html(data);
 }

Copy after login

Use jQuery's html() method to dynamically display data into the DIV layer.
Now we optimize the above code. We can achieve the functions of all the above codes with just two sentences of code. This is one of the strengths of jQuery. The verify() method in the verify.js file can also be written in the following form:

$.get("TestServlet&#63;uname=" +$("#uname").val(),null,function(data){
 $("#result").html(data);
})

Copy after login

Let me share another one with you. The following is an example of "login without refreshing", which is implemented using Ashx+jQuery Ajax.
1. Backend instance code ashx file (can be replaced by reading from the database)

public void ProcessRequest(HttpContext context) 
{ 
 context.Response.ContentType = "text/plain"; 
 //context.Response.Write("Hello World"); 
 
 string name = context.Request.Params["name"].ToString().Trim(); 
 if ("china".Equals(name)) 
 { 
 context.Response.Write("1");//1标志login success 
 } 
 else 
 { 
 context.Response.Write("0");//0标志login fail 
 } 
}

Copy after login

2. Front-end example code aspx file

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
 <title></title> 
 
 <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 
 
 <script type="text/javascript"> 
 $(function() { 
  $("#test").live("click", function() { 
  //alert(0); 
  $.ajax({ 
   type: 'POST', 
   url: 'Handler1.ashx', 
   data: { "name": $("#name").val() }, 
   success: function(data) { 
   if (1 == data) 
    alert('login success'); 
   else 
    alert('login fail'); 
   } 
  }); 
  }); 
 }); 
 </script> 
 
</head> 
<body> 
 <form id="form1" runat="server"> 
 <div> 
 <input type="text" name="name" id="name" /> 
 <input type="button" name="test" id="test" value="validate" /> 
 </div> 
 </form> 
</body> 
</html>

Copy after login

Enter the above code into the front-end aspx page and the back-end ashx page respectively, and you will achieve a super simple Ajax login. Very simple, right?