如何正确设置简单的AJAX

Question

因此，如果我不使用ajax进行设置，则效果很好。 一旦包含ajax，页面就会在网址栏中加载“？search = 63105”，但结果div中将不显示任何内容

HTML + jQuery

<form>
<input type="text" name="search" id="search" placeholder="Search"/>
</form>
<div id="results"></div>



<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
 $("form").on('submit', (function(e){
   var search = $('#search').val();
   var dataString = 'search=' + search;
   e.preventDefault();
   $.ajax({
        type: "POST",
        url: "searchpost.php",
        data: dataString,
        success: function(data) {
            $('#results').html(data);
        }
     });
   });
 });
</script>

PHP页面

<?php
require_once('../config/db.php');
require_once('../customLIB/pdo_db.php');
require_once('../models/test.php');
$SalesRep = new SalesRep();

if ($_POST['search']) {
 $data = $_POST['search'];
 $rep = $SalesRep->getRep($data);

 if (!empty($rep)) {
    echo $rep->name;
  } else {
    echo "No sales reps found..";
  }
}
?>

同样，即使应该显示结果，也什么也没有显示。 PHP可以正常工作，这是没有问题的。

谢谢。

Answer 1

表单提交功能的行为e.preventDefault() ，但是该功能从不接受事件参数e 。

$("form").on('submit', (function(){
    e.preventDefault();
    //...
});

应该是

$("form").on('submit', (function(e) {
    e.preventDefault();
    //...
});

由于永远不会阻止表单提交，因此表单照常提交，因此AJAX调用不会得到完全执行。

编辑：另外，以下几行

var search = $('#search').val();
var dataString = 'search=' + search;

应该在提交功能之内。 只有这样，它才能在提交搜索期间获得#search的值。

EDIT4：发现执行var dataString = 'search=' + search; 无论如何都可以工作，因此可以忽略EDIT2。

EDIT2：不太熟悉PHP方面，但是POST-ing数据通常由JavaScript对象完成。 尝试让dataString为

var dataString = { search: search };

或者更好的是，将表格本身序列化

var dataString = $('form').serialize();

编辑3：找到一个额外的括号，可能是问题的原因。

$("form").on('submit', -->(function(e){

最终代码应为

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "searchpost.php",
            data: $('form').serialize(),
            success: function (data) {
                $('#results').html(data);
            }
        });
    });
});

Answer 2

您正在使用post方法，更改post参数数据：{'search'：search}然后在PHP文件中插入echo，从PHP返回值。