jQuery+AJAX来检索由输入提交类型发送的数据 - jQuery + AJAX to retrieve data sent by an input submit type

我想通过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>

你做错了，伙计：）。。

更改

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

至

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

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

它有什么用。如果您需要提醒数据邮政编码搜索，

然后只做

 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);
           }
       }); 
    }); 
});

希望这对你有所帮助。：）

错误："#postcodeSearch".val不是函数

用途：

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

而不是：

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

打开firebug/chrome开发工具，并在您的成功函数中放入

console.log（php_output）

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

http://jsfiddle.net/Fgtzd/