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有效。现在的问题是数据。它去哪儿了？我需要将数据（名称=＆＃34;搜索＆＃34;）文本框返回给我的控制器。

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

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

如果它只是一个有行动的表格，表格将与数据一起提交。

Answer 1

Please read this before used AJAX function handle the submit form

＆＃13;

from py2neo import Graph

graph = Graph()

print(graph.order)

＆＃13;

请试一试。

Ajax函数使用了提交事件。

Answer 2

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

您必须取消提交活动。来自jQuery API Dock的解释：

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

$('#myForm').submit()

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

Answer 3

有三种方法可以防止更改您的网页而代码变化很小：

1）将您的按钮更改为

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

为了防止它提交表单，只是触发你处理提交的AJAX函数;

2）更改＆＃34;触发器＆＃34;您的jquery函数

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

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

3）添加

event.preventDefault();

或

return false;

在关闭jour AJAX函数之前

。

关于收集yor数据的问题，您只需将输入值传递给AJAX函数（将id =＆＃34; searchinput＆＃34;分配给搜索文本输入）：

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.

如果是这样，请添加 onclick =＆＃34;将false＆＃34; 返回到您的元素并尝试一下！

 //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

＆＃13;

$('#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);
        });
    });

＆＃13;

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

＆＃13;

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来获取数据

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

6 个答案: