将原型脚本更改为jquery one

时间:2010-03-30 19:24:44

标签: jquery forms prototypejs

我有此表单提交代码:

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");
?>

3 个答案:

答案 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);