时间戳

首页 > 解决方案 > 如何正确设置简单的 AJAX

php - 如何正确设置简单的 AJAX

问题描述

因此，如果我在没有 ajax 的情况下设置它，它就可以正常工作。一旦我包含 ajax，页面就会加载带有“？search=63105”的 url 栏，但结果 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 工作，这是没有问题的。

谢谢。

标签： phpjqueryajax

解决方案

表单提交函数，你有这条线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 数据通常是使用 JavaScript 对象完成的。尝试dataString成为

var dataString = { search: search };

或者更好的是，让表单自行序列化

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

EDIT3：发现一个额外的括号可能是问题的原因。

$("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);
            }
        });
    });
});

推荐阅读