Question

我目前正在使用Prototype，但我想将此函数重写为jQuery：

function post(div,url,formId) {
  new Ajax.Updater(div, url, {
    asynchronous:true, 
    parameters:Form.serialize(formId)
  });
}

随之而来的HTML示例：

<form method="post" action="" id="foo" 
  onsubmit="post('result','getdata.php','foo');return false;">
  <input type="text" name="data" />
</form>
<div id="result"></div>

我一直在关注jQuery.load（）和jQuery.post（），但我不确定使用哪一个以及如何使用。

提前感谢您的帮助。

Answer 1

使用此HTML：

<form method="post" action="getdata.php" id="foo">
  <input type="text" name="data" />
</form>
<div id="result"></div>

您可以使用jQuery执行此操作：

$(function() { // wait for the DOM to be ready
    $('#foo').submit(function() { // bind function to submit event of form
        $.ajax({
            type: $(this).attr('method'), // get type of request from 'method'
            url: $(this).attr('action'), // get url of request from 'action'
            data: $(this).serialize(), // serialize the form's data
            success: function(responseText) {
                // if everything goes well, update the div with the response
                $('#result').html(responseText);
            }
        });
        return false; // important: prevent the form from submitting
    });
});

我摆脱onsubmit代码的原因是因为像这样的内联JavaScript被认为是不好的做法。您应该努力使表单不受JavaScript影响，然后将所有JavaScript绑定。这被称为不引人注目的JavaScript，它是一件好事。

修改：

由于您在许多页面中都有该代码，因此这个函数可以使用您当前在post函数上使用的相同签名来执行您想要的操作。我建议您花几个小时来更新所有表格而不是这样，但无论如何它都是：

function post(div,url,formId) { $.post(url, $('#' + formId).serialize(), function(d) { $('#' + div).html(d); }); }

就您的问题而言，livequery插件可以帮助您。或者，它就像将绑定代码封装在函数中并在添加表单时调用它一样简单。

Answer 2

使用此功能并删除HTML中的onsubmit属性：

$(document).ready(function() {
    $("#foo").submit(function() {
        $.post($(this).attr("action"), $(this).serialize());
        return false; // prevent actual browser submit
    });
});

jQuery serialize method docs

Answer 3

由于安全问题，您无法使用jquery发送“multipart / form-data”表单。你必须使用flash或iframe ...

使用jQuery处理表单数据

3 个答案: