下次自动登录
现在的位置:
& 综合 & 正文
jQuery ajax表单提交实现局部刷新 ajaxSubmit
jQuery ajaxSubmit可以实现AJAX提交表单 局部刷新页面DIV
（可以实现刷新JSP TABLE 哦！）
需要引入 ： jquery-form.js
使用说明：
$(document).ready(function() {
var options = {
// 需要刷新的区域
//beforeSubmit:
showRequest,
// 提交前调用的方法
//success:
showResponse
// 返回后笤俑的方法
// other available options:
// 提交的URL, 默认使用FORM
// 'get' or 'post', override for form's 'method' attribute
//dataType:
// 'xml', 'script', or 'json' (expected server response type)
//clearForm: true
// 是否清空form
//resetForm: true
// 是否重置form
// $.ajax options can be used here too, for example:
//timeout:
// 绑定FORM提交事件
$('#myForm').submit(function() {
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
调用前后方法：
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formD here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element.
To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form
// returning anything other than false will allow the form submit to continue
return true;
// post-submit callback
function showResponse(responseText, statusText)
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
项目中可以写一个公用的方法：
// 局部提交表单
function formSubmit(formId, divId, url) {
$('#' + formId).submit(function() {
$(this).ajaxSubmit( {
target : '#' + divId,
url : url,
error : function() {
alert('加载页面' + url + '时出错！')
return false;
=====================================================================
事例 刷新TABLE：
1.把TABLE单独放一个JSP，主页面 include TABLE页面。
2.主页面：
window.onload=function (){
//AJAX 提交FORM刷新TABLE
$('#queryForm').submit(function() {
$(this).ajaxSubmit( {
target : '#table1'
return false;
点击查询按钮
提交FORM。
3.JAVA：FORM提交调用的方法和 普通的ACTION写法一样， STRUTS里配置该ACTION跳转到
那个单独的TABLE JSP页面，返回成功后，就会看到刷新了TABLE。
* AJAX汇总查询 未公开知情人列表
* 部门合规风控专员 汇总查询
public String ajaxgatherinsiderlist() {
//相关业务数据查询
return SUCCESS;
&&&&推荐文章:
【上篇】【下篇】16:02 提问
使用springmvc中controller怎么实现JSP页面数据提交到oracle数据库，求代码。
如何使用controller进行JSP页面输入数据的存储，如图，怎么写这个功能的代码，将咨询内容提交到后台数据库中，然后在后台管理的页面进行对该问题的回复。求大神给写个代码。谢谢。
按赞数排序
你要把数据传递到后台，然后在保存到数据库里面，建议使用Ajax操作，先把数据传递到后台，通过业务逻辑保存好了之后，再把你的回复通过Ajax的回调函数返回到界面
怎么写的，求给个代码、
先获取数据，然后再用代码把数据提交到数据库中
首先，jsp页面用表单提交数据到后台Action中，action中收集数据，调用DAO完成数据存储。
其次，数据库配置时使用orcle数据源，使用hibernate或者ibatis数据库集成框架完成数据的存储。
其他相关推荐
其他相似问题2011年6月 Web 开发大版内专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。AJAX Database Operations
AJAX - Database Operations
Advertisements
To clearly illustrate how easy it is to access information from a database using AJAX, we are going to build MySQL queries on the fly and display the results on "ajax.html". But before we proceed, let us do the ground work. Create a table using the following command.
NOTE: We are assuming you have sufficient privilege to perform the following MySQL operations
CREATE TABLE 'ajax_example' (
'name' varchar(50) NOT NULL,
'age' int(11) NOT NULL,
'sex' varchar(1) NOT NULL,
'wpm' int(11) NOT NULL,
PRIMARY KEY
Now dump the following data into this table using the following SQL statements:
INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);
Client Side HTML File
Now let us have our client side HTML file, which is ajax.html, and it will have the following code:
&script language="javascript" type="text/javascript"&
//Browser Support Code
function ajaxFunction(){
// The variable that makes Ajax possible!
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseT
// Now get the value from user and pass it to
// server script.
var age = document.getElementById('age').
var wpm = document.getElementById('wpm').
var sex = document.getElementById('sex').
var queryString = "?age=" +
queryString +=
"&wpm=" + wpm + "&sex=" +
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
&form name='myForm'&
Max Age: &input type='text' id='age' /& &br /&
Max WPM: &input type='text' id='wpm' /& &br /&
&select id='sex'&
&option value="m"&m&/option&
&option value="f"&f&/option&
&input type='button' onclick='ajaxFunction()' value='Query MySQL'/&
&div id='ajaxDiv'&Your result will display here&/div&
NOTE: The way of passing variables in the Query is according to HTTP standard and have formA.
URL?variable1=value1;&variable2=value2;
The above code will give you a screen as given below:
NOTE: This is dummy screen and would not work
Your result will display here in this section after you have made your entry.
NOTE: This is a dummy screen.
Server Side PHP File
Your client-side script is ready. Now, we have to write our server-side script, which will fetch age, wpm, and sex from the database and will send it back to the client. Put the following code into the file "ajax-example.php".
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
if(is_numeric($age))
$query .= " AND age &= $age";
if(is_numeric($wpm))
$query .= " AND wpm &= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "&table&";
$display_string .= "&tr&";
$display_string .= "&th&Name&/th&";
$display_string .= "&th&Age&/th&";
$display_string .= "&th&Sex&/th&";
$display_string .= "&th&WPM&/th&";
$display_string .= "&/tr&";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
$display_string .= "&tr&";
$display_string .= "&td&$row[name]&/td&";
$display_string .= "&td&$row[age]&/td&";
$display_string .= "&td&$row[sex]&/td&";
$display_string .= "&td&$row[wpm]&/td&";
$display_string .= "&/tr&";
echo "Query: " . $query . "&br /&";
$display_string .= "&/table&";
echo $display_
Now try by entering a valid value (e.g., 120) in Max Age or any other box and then click Query MySQL button.
Your result will display here in this section after you have made your entry.
If you have successfully completed this lesson, then you know how to use MySQL, PHP, HTML, and Javascript in tandem to write AJAX applications.
& Copyright 2017. All Rights Reserved.}