Question

很奇怪。我有一个功能很好的ajax功能：

function searchProduct(){
var barcode=$.trim($('#barcode1').val());
$.ajax({
        type: 'GET',
        url: 'http://.............',
        data:{ 
            action: "search", 
            var: barcode, 
            },
        cache: false,
        datatype: 'json',
        success: function(output){

当我从表单提交事件中调用此函数时，无论如何，我都得到ajax的错误函数。

<form id="searchBox" name="searchBox" onsubmit="searchProduct()">

但是，如果我通过按钮点击事件调用此功能，它可以正常工作并获得成功（）

<span  class="tab-label" onclick="searchProduct()">Scan</span>

你怎么看待这个？

Answer 1

在表单提交事件中，您必须使用preventDefault()停止其默认行为，否则将发生回发，这可能是错误的原因。

使用searchProduct(this)将当前元素引用传递给函数，并在函数中使用preventDefault()，如下所示：

<form id="searchBox" name="searchBox" onsubmit="searchProduct(this);">

<强> Jquery的：

function searchProduct(event){
var barcode=$.trim($('#barcode1').val());
$.ajax({
        type: 'GET',
        url: 'http://.............',
        data:{ 
            action: "search", 
            var: barcode, 
            },
        cache: false,
        datatype: 'json',
        success: function(output){
         }
      });

     event.preventDefault();

}

Answer 2

表单提交实际上会向Web服务器发送一个HttpRequest，我想知道您为什么要发送一个AJAX请求。

OnClick将是简单事件，您可以使用它来触发AJAX请求，它不会向服务器发送任何其他HttpRequest。

包含ajax的javascript函数在提交后不起作用，但使用按钮单击事件

2 个答案: