jquery Ajax How to submit form data to a JSP _jquery

Ajax is getting more and more hot, and as a web developer, if it doesn't feel like it's going to be out of date, it's even likely to be eliminated in a job search. I am also a Web application developer, of course, I also want to "drift" one, or the job is not guaranteed Ah!

Before implementing Ajax using a JavaScript script one knock it out, it's tedious. After learning jquery It is not so difficult to realize Ajax, of course, apart from the jquery framework there are other excellent frameworks here I will focus on the more popular jquery. There are two ways of Jquery Ajax submission form, one is the URL parameter submission data, and the other is form submission (peace is always the same in the background can get the value of form forms). In the form you want to submit, if there are a lot of elements suggested that the second way to submit, of course, if you want to practice "typing level" words in the first way to submit also may not be, I believe the developers do not want to pay white effort!

Ajax technology brings us a good user experience, while using jquery simplifies development and improves productivity.

Here's an overview of the development steps.

This article uses the Jquery-1.3.2.min.js development tool.

Create a new two page:

1. show.jsp: Invoke Ajax to send the data from the form to the ajax.jsp page.

2. ajax.jsp: Gets the form data passed by the Show.jsp page and returns the result.

The encoding format for two pages is set to GBK:

<%@ page contenttype= "TEXT/HTML;CHARSET=GBK"%>

Key parts of the show.jsp page:

1, add the reference to the Jquery-1.3.2.min.js:

<script type= "Text/javascript" src= "Jquery-1.3.2.min.js" ></script>

2. Set the ID of the form and use it when invoking the Ajax method.

<form id= "Ajaxfrm" >

3, set a div, to display the results of ajax.jsp page return

<div id= "Ajaxdiv" ></div>

4. Add a button to invoke Ajax

<input type= "button" onclick= "DoFind ()" Value= "Invoke Ajax" >

5. Add functions to invoke Ajax:

function DoFind () {

$.ajax ({

cache:false,

type: "POST",

URL: "ajax.jsp"///Send form data to ajax.jsp

data:$ (' #ajaxFrm '). Serialize (),//To send the data in the Ajaxfrm form

async:false,

error:function (request) {

alert ("Send request failed!") ");

},

success:function (data) {

$ (" #ajaxDiv "). HTML (data); Displays the results returned to Ajaxdiv}}

);

Source code for 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 garbled problem

}

String returnstring = "";

returnstring= "Hello," + userName;

Out.print (returnstring);

%>

The operation effect is as follows:

jquery Ajax submission form from action to JSP

JSP page:

The code is as follows:

var Clienttel = $ ("#clientTel"). Val (); 
var ActivityID = $ ("#activityId"). Val (); 
$.ajax ({ 
type: Post),//Send As 
URL: "/arweb/reserve/savecode.action",//Path 
data: "Clienttel=" +clienttel+ "&activityid=" +activityid, 
success:function (text) {$ ("#randomCode"). Val (text), 
error:function ( Text) {alert ("Sorry, the user ID does not exist, please enter the correct user ID");} 

Acion class:

The code is as follows:

HttpServletResponse res = Servletactioncontext.getresponse (); 
Res.reset (); 
Res.setcontenttype ("Text/html;charset=utf-8"); 
PrintWriter pw = Res.getwriter (); 
Pw.print (random); 
Pw.flush (); 

Pw.print (random); The random here is the value to be passed to the JSP, in the JSP, Success:function (text) Here is the text that receives the value from the action.