jquery ajax how to submit form data to jsp_jquery

AJAX is becoming more and more popular. As a WEB program developer, if you don’t feel this way, you will fall behind, and may even be eliminated repeatedly when applying for jobs. I am also a WEB program developer. Of course, I have to "go with the flow", otherwise my job will not be guaranteed!

Previously, the implementation of AJAX used Javascript scripts to type them out one by one, which was very cumbersome. After learning Jquery, I feel that implementing AJAX is not that difficult. Of course, in addition to the Jquery framework, there are other excellent frameworks. Here I will focus on the more popular Jquery. There are two ways to submit a form in Jquery AJAX, one is to submit data via url parameter, and the other is to submit form (as usual, the value of the Form form can be obtained in the background). In the form to be submitted, if there are many elements, it is recommended to submit in the second way. Of course, if you want to practice your "typing skills", it is not a bad idea to submit in the first way. I believe developers don't want to waste their efforts. !

Ajax technology brings us a good user experience. At the same time, using jquery can simplify development and improve work efficiency.

The following is an introduction to the general development steps.

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

Create two new pages:

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

2. ajax.jsp: Get the form data passed by the show.jsp page and return the results.

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

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

Key part of show.jsp page:

1. Add a reference to 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, which is used when calling the ajax method.

<form id="ajaxFrm" >

3. Set up 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="调用一下ajax" >

5. Add a function to call ajax:

function doFind(){

$.ajax({

cache: false,

type: "POST",

url:"ajax.jsp", //把表单数据发送到ajax.jsp

data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据

async: false,

error: function(request) {

alert("发送请求失败！");

},

success: function(data) {

$("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中

}

});

}

Source code of 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");//解决乱码的问题

}

String returnString = "";

returnString="你好，" + userName;

out.print(returnString);

%>

The operation effect is as follows:

jquery ajax submit form passes value from action to jsp

jsp page:

The code is as follows:

var clientTel = $("#clientTel").val(); 
var activityId = $("#activityId").val(); 
$.ajax({ 
type : "post",//发送方式 
url : "/arweb/reserve/saveCode.action",// 路径 
data : "clientTel="+clientTel+"&activityId="+activityId , 
success: function(text){$("#randomCode").val(text);}, 
error: function(text) {alert("对不起,用户ID不存在,请输入正确的用户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.close(); 

pw.print(random); The random here is the value passed by the action to jsp. In jsp, success: function(text) The text here is the value passed from the action.