Question

我有一个简单的登录表单。

<form id="login" action="process/login_process.php" method="POST" name="login" accept-charset="utf-8">
<div><label>Username:</label><input type="text" name="username" data-ideal="required"/></div>
<div><label>Password:</label><input type="password" name="password" data-ideal="required"/></div>
<div><button id="submit" type="submit">Login</button></div>
</form>

我正在使用JQ-IDEALFORMS进行表单的验证和整体美观。我正在努力确定如何通过ajax提交表单。这是我到目前为止的javascript：

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<script src="javascripts/jquery.idealforms.min.js"></script>
<script>
    var options = {
        onSuccess: function() {
            $.post('process/login_process.php', $myform.serialize())
            alert(responseXML);
        }
    };
    var $myform = $('#login').idealforms(options).data('idealforms');
    $('#submit').click(function() {
        $.post('process/login_process.php', $myform.serialize());
        alert('hello');
    });

我按照文档中非常有限的说明进行操作，并将$ .post添加到options变量中的onSuccess操作中。这不起作用。然后我尝试在提交按钮中添加一个监听器，警报框永远不会出现，这意味着监听器永远不会触发。该怎么做？我已经能够提交表单，但是当我这样做时，它会将页面重定向到我的php页面，我的XML正在回显。出于某种原因，我无法回复我的登录页面。

Answer 1

在表单的action属性中，您必须返回false以防止提交表单或将操作更改为javascript:void(0) ...

<form id="login" action="javascript:submitForm()" method="POST" name="login" accept-charset="utf-8">

在JS中

var submitForm = function() {
    var options = {
       onSuccess: function() {
          $.post('process/login_process.php', $myform.serialize())
          alert(responseXML);
       }
    };
    var $myform = $('#login').idealforms(options).data('idealforms');
     //not sure this part is needed because Post already call in the success method of idealforms
    $.post('process/login_process.php', $myform.serialize());
    alert('hello');
};

Answer 2

通过ajax发送表单。

var createForm = $("form#login");
var postData = createForm.serialize();

        $.ajax({
            type: "POST",
            url: "/Offers/CreateOffer",
            data: postData,
            success: function (result, textStatus, jqXhr) {
           }
         });

jq-idealforms通过AJAX发送表格

2 个答案: