如何让AJAX函数处理提交表单

Question

我正在创建此简单的搜索表单

<form id="myForm" method="POST">
    <table>
        <tr>
            <td><input type="text" name="search" placeholder="Search Accounts" /></td>
            <td><button type="submit">Search</button></td>
        </tr>       
    </table>
    <br/>
</form>

我不希望我的表格转到另一页。 这就是为什么不采取任何行动的原因。 我想要AJAX函数来处理。 但这是行不通的。

我已经尝试过使用javascript，

$('#myForm').click(function(){
    $.ajax({
            url: ROOT_URL + 'account/send',
            type: "post",
            dataType: "text"
        }).done(function(data) {
            $('#accounts-container').html(data);
    });
});

当我尝试实现此功能时，它将我定向到主页。

编辑

更新：.submit和preventDefault有效。 现在的问题是数据。 去哪儿了？ 我需要data（name =“ search”）文本框回到我的控制器。

在我的控制器中，我收集数据，

List<Users> list = accountService.getUserList(search);

如果它只是一个带有动作的表单，则该表单将与数据一起提交。

Answer 1

请在使用AJAX功能处理提交表格之前阅读此书

  $('#myForm').submit(function(){ $.ajax({ url: ROOT_URL + 'account/send', type: "post", dataType: "text" }).done(function(data) { $('#accounts-container').html(data); }); }); 

请尝试这个。

使用了Ajax Function的Submit事件。

Answer 2

您需要将$('#myForm').click()更改$('#myForm').submit()

比您必须取消提交事件。 jQuery API Dock的说明：

现在，提交表单后，将提示该消息。 这发生在实际提交之前，因此我们可以通过在事件对象上调用.preventDefault（）或从处理程序中返回false来取消提交操作。

$( "#target" ).submit(function( event ) {
     $.ajax({
        url: ROOT_URL + 'account/send',
        type: "post",
        dataType: "JSON",
        data: { name: "search" },
     }).done(function(data) {
        $('#accounts-container').html(data);
     });
     event.preventDefault();
});

在这种情况下，submit事件将执行ajax调用，然后它会阻止Submit事件的默认行为（它不会重新加载页面）。

Answer 3

只需很少更改代码，就可以通过3种方法来防止页面更改：

1）将按钮更改为

<button type="button">Submit</button>

为了防止表单提交您的表单，而只是触发您处理提交的AJAX函数；

2）将您的jquery函数的“触发器”更改为

$('#myForm').submit(function(){

因此它将在提交时触发jquery，并且默认行为将阻止操作重定向发生；

3）添加一个

event.preventDefault();

要么

return false;

关闭jour AJAX功能之前。

对于收集数据的问题，您只需将输入值传递给AJAX函数（将id =“ searchinput”分配给搜索文本输入）：

url: ROOT_URL + 'account/send',
data: {yourvarname:$("#searchinput").val()},
type: "post",

<input type="text" name="search" id="searchinput" placeholder="Search Accounts" />

Answer 4

您说I dont want my form to go to another page. That is why there is no action. I dont want my form to go to another page. That is why there is no action.

如果是这样，请在您的元素中添加onclick =“ return false”并尝试！

 //add onclick false
 <form id="myForm" method="POST" onclick="return false;">
        <table>
            <tr>
                <td><input type="text" name="search" placeholder="Search Accounts" /></td>
                <td><button type="submit">Search</button></td>
            </tr>       
        </table>
        <br/>
    </form>

或添加return false; 到你的ajax函数的最后一行

$('#myForm').click(function(){
    $.ajax({
            url: ROOT_URL + 'account/send',
            type: "post",
            dataType: "text"
        }).done(function(data) {
            $('#accounts-container').html(data);
    });
    return false;//here 
});

Answer 5

 $('#btnSubmit').click(function(){ alert("Here you can make your ajax request and get response from action"); var value= "search text";// please get your search value here and pass. $.ajax({ url: ROOT_URL + 'account/send', data: {search: value}, type: "post", dataType: "text" }).done(function(data) { $('#accounts-container').html(data); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <button type="submit" id="btnSubmit">Search</button> 

Answer 6

使用按钮类型代替提交和添加id属性。 所以改变

<td><button type="submit">Search</button></td>
to
<td><button type="button" id="submitFormBtn">Search</button></td>

将ID添加到您的文本框。

<input type="text" id="search" name="search" placeholder="Search Accounts" />

在您的JS中，对SubmitFormBtn使用click函数。

$('#submitFormBtn').click(function(){
$.ajax({
        url: ROOT_URL + 'account/send',
        type: "post",
        data : {searchText : $('#search').val()},//get the textbox value and pass it
        dataType: "text"
    }).done(function(data) {
        $('#accounts-container').html(data);
  });
});

在服务器端方法上，使用变量名称-searchText来获取数据