我有此表单提交代码:
Event.observe(window, 'load', init, false);
function init() {
Event.observe('addressForm', 'submit', storeAddress);
}
function storeAddress(e) {
$('response').innerHTML = 'Adding email address...';
var pars = 'address=' + escape($F('address'));
var myAjax = new Ajax.Updater('response', 'ajaxServer.php', {method: 'get', parameters: pars});
Event.stop(e);
}
如何更改它以使用jQuery?
这是html表单:
<form id="addressForm" action="index.php" method="get"> <b>Email:</b> <input type="text" name="address" id="address" size="25"><br> <input name="Submit" value="Submit" type="submit" /> <p id="response"><?php echo(storeAddress()); ?></p> </form>
这是文档开头的PHP代码:
<?php
require_once("inc/storeAddress.php");
?>
答案 0 :(得分:3)
这样的事情:
$(function() {
$('#addressForm').submit(function() {
$('#response')
.html('Adding email address...')
.load('ajaxServer.php', { address: $('#address').val() }, function() {
$('#address').val('');
});
return false;
});
});
注意:使用.load()
时,如果数据作为对象提供,则使用POST方法;否则,假设GET。因此,如果要将数据作为GET传递,请使用:
.load('ajaxServer.php', 'address='+$('#address').val());
或者只是从$_POST['address']
获取提交的数据,这在我看来会更明智,更容易。
答案 1 :(得分:2)
您可以像这样转换脚本:
$(function() {
$('#addressForm').submit(function(e) {
$('#response').html('Adding email address...');
$.ajax({
url: 'ajaxServer.php',
type: 'GET',
data: {'address': $('#address').val() },
success: function(response) {
$('#response').html(response);
}
});
e.preventDefault();
return false;
});
});
以下是等价物的概述:
.html()
用于innerHTML调用$('#id')
selector通过ID $.ajax
用于ajax调用
data
是传递的参数,设置对(地址= ...)success
回调会运行
id="response"
div 答案 2 :(得分:-1)
给它一个旋转......
function init()
{
$('#addressForm').submit(storeAddress);
}
function storeAddress(e)
{
$('#response').html('Adding address...');
var params = 'address=' + $('#address').val();
$('#response').load('ajaxServer.php', params);
$.ajax({
url : 'index.php',
data : $('#addressForm').serialize(),
success : function(data)
{
alert('yay, form data sent!');
}
});
// Fix - stops page reload
return false;
}
$(document).ready(init);