Home > Article > Web Front-end > jQuery+Ajax implements refresh-free operation_jquery

jQuery+Ajax implements refresh-free operation_jquery

WBOYOriginal: 2016-05-16 15:21:531149browse

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 + "]尚未存在！您可以注册！");
  }
 }
}

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>

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>

Note: There is no need to use a form to submit data in Ajax mode, so there is no need to write the ff9c23ada1bcecdd1a0fb5d5a0f18437 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();

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);
 }

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);
})

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 
 } 
}

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>

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?

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implements secondary drop-down menu effect_jqueryNext article：jQuery implements secondary drop-down menu effect_jquery

See more

jQuery+Ajax implements refresh-free operation_jquery

Related articles