php - jQuery + AJAX 检索输入提交类型发送的数据

Question

我想通过 jQuery 使用 AJAX 函数将一些数据返回到我的主页上。目前，我在表单上对外部 PHP 文件使用“action=”，只是为了检查数据是否正在发送。我现在想使用 AJAX 将此数据返回到我主页上的 div 中。我有这段代码，但目前它没有返回任何数据:

$("#ticketSearch").click(function(e) {
  e.preventDefault();
    var eNameData = ("#postcodeSearch").val();
      alert('#ticketSearch clicked'); //this alert doesn't even work!

    var dataToSend = 'postcodeSearch=' + eNameData;

    $.ajax({                
        url: "index.php", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(php_output)
            {
            $("#ticketResults").html(php_output).show();
            }
    }); 
});

表单代码:

<form name="pcSearchForm" id="pcSearchForm" class="pcSearchForm"  method="post" action="postCodeSearch.php"> // the action method needs to be taken out

        <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

        <input type="submit" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" /> 

</form>

非常感谢任何帮助，我认为我的做法是正确的，但有些事情就是不对! 谢谢。

编辑:新代码:

$(document).ready(function() {
  $("#ticketSearch").click(function(e) {
alert("click");
e.preventDefault();
var eNameData = $("#postcodeSearch").val();
 alert('eNameData');
 });

var dataToSend = 'postcodeSearch=' + eNameData;

    $.ajax({                
        url: "index.php", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(php_output)
            {
            $("#ticketResults").html(php_output);
            alert("#ticketResults");
            }
    }); 
}); 

形式:

        <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

        <input type="button" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" />


    </form>

Answer 1

你做错了，伙计:) ..

改变

var eNameData = ("#postcodeSearch").val();

到

var eNameData = $("#postcodeSearch").val();

我想知道你为什么使用 alert('#ticketSearch clicked'); 。

它有什么用。如果需要提醒数据 zip 搜索，

然后就这样做

 alert(eNameData'); 

希望这对你有帮助:)

编辑:

你的代码似乎是错误的，你的点击事件在ajax调用完成之前就关闭了。我还认为你调用了错误的文件。您的表单提交操作页面是 postCodeSearch.php 但在 ajax 中您正在调用 index.php

您的代码应更改为:

表格:

<form name="pcSearchForm" id="pcSearchForm" class="pcSearchForm"  method="post" action="postCodeSearch.php"> // the action method needs to be taken out

        <input type="text" name="postcodeSearch" id="postcodeSearch" class="postcodeSearch" placeholder="Postcode..." /> 

        <input type="button" name="ticketSearch" id="ticketSearch" class="ticketSearch" value="Search" /> 

</form>

JS:

$(document).ready(function() {
    $("#ticketSearch").click(function(e) {
       var eNameData = $("#postcodeSearch").val();
       var dataToSend = 'postcodeSearch=' + eNameData;

       $.ajax({                
           url: "postCodeSearch.php", 
           type: "POST",
           data: dataToSend,     
           cache: false,
           success: function(php_output) {
               $("#ticketResults").html(php_output);
           }
       }); 
    }); 
}); 

希望这对您有帮助。 :)