Question

我有一个HTML页面

<form id="customer">    
<label for="customer-name">Enter customer names: </label>
<input type="text" id="customer-name"/>
<input type="submit" value="Submit"/>
</form>

此HTML网页的网址为http://www.example.com/customer。当我提交表单时，我想将ajax GET用于以下URL：

http://www.example.com/customer/query?customer-name=davis

ajax代码如下：

$(document).ready(function() {
    $("#customer").submit(function() {
    $.ajax({
        url: 'customer/query',
        type: 'GET',
        data: $("#customer-name").val(),
        success: function(data) {
        alert(data);
        }
    });
    });
});

但是当我在文本框中输入“davis”并单击“提交”按钮时，它转到了以下URL（没有/query子路径）：

http://www.example.com/customer?customer-name=davis

所以它没有找到我想要的正确的URL地址。即使我在Ajax请求中指定了URL，它也只会转到/customer路径，而不是/customer/query子路径。如何将ajax GET设置为正确的URL地址？或者我在代码中犯了一些错误？

Answer 1

您的表单可能正在提交。试试这个

$(function() {
  $("#customer").submit(function(e) {
     e.preventDefault();
     $.get('customer/query',{"customer-name":$("#customer-name").val()},
       function(data) {
        alert(data);
       }
     );
  });
});

以上代码用于从服务器获取数据，而无需将新页面加载到浏览器中。

根据我的理解，您想删除所有的javascript，只需更改为

<form action="customer/query"> 
  <label for="customer-name">Enter customer names: </label>
  <input type="text" id="customer-name" name="customer-name"/>
  <input type="submit" value="Submit"/>
</form>

如何使用ajax GET将表单数据提交到正确的URL？

1 个答案: