Ajax application in jQuery (4) submit form data to jsp, ajaxjquery

Ajax application in jQuery (4) submit form data to jsp, ajaxjquery
Ajax brings us a good user experience. At the same time, using jquery can simplify development and improve work efficiency.

The following describes the general development steps.

Tools/Raw Materials

• Jquery-1.3.2.min.js is used in this article

Method/step

1. Create two pages:

   1. show. jsp: call ajax to send data in the form to the ajax. jsp page.

   2. ajax. jsp: Obtain the form data passed on the show. jsp page and return the result.

   The encoding format of the two pages must be set to GBK:

   <% @ Page contentType = "text/html; charset = GBK" %>

2. Highlights of the show. jsp page:

   1. Add a reference to the jquery-1.3.2.min.js:

   <Script type = "text/javascript" src = "jquery-1.3.2.min.js"> </script>

   2. Set the Form id, which is used to call the ajax method.

   <Form id = "ajaxFrm">

   3. Set a div to display the results returned by the ajax. jsp page.

   <Div id = "ajaxDiv"> </div>

   4. Add a button to call ajax.

   <Input type = "button" onClick = "doFind ();" value = "call ajax">

   5. Added ajax functions:

   Function doFind (){

   $. Ajax ({

   Cache: false,

   Type: "POST ",

   Url: "ajax. jsp", // send form data to ajax. jsp

   Data: $ ('# ajaxfrm'). serialize (), // the data in the ajaxFrm form to be sent

   Async: false,

   Error: function (request ){

   Alert ("sending request failed! ");

   },

   Success: function (data ){

   $ ("# AjaxDiv" ).html (data); // display the returned result to ajaxDiv

   }

   });

   }

3. Source code of the ajax. jsp page:

   <% @ Page contentType = "text/html; charset = GBK" %>

   <%

   String userName = request. getParameter ("UserName ");

   If (userName! = Null ){

   UserName = new String (userName. getBytes ("ISO-8859-1"), "UTF-8"); // solve the garbled Problem

   }

   String returnString = "";

   ReturnString = "hello," + userName;

   Out. print (returnString );

   %>

4. The running effect is as follows: