Question

我的情况如下，我在Jquery Mobile页面中有一个表单输入，我正在提交没有表单按钮的表单。我需要在html中返回来自php（它是在JSON中）的返回结果。但是当我按下输入按钮提交搜索时，它链接到php页面，返回的结果只是卡在那里，而不是回到html页面。谢谢你的时间！

代码：

$("#searchform").submit(function( event ) {
    $.ajax({
        type: "GET",
        url: "http://test.com/App/searchtest.php",
        dataType:'json',
        success: function(data){ 
            console.log(data);
            $("#content").append(data);
        }
    })
});

<form id="searchform" name="searchform" method="post"
        action="http://www.test.com/App/searchtest.php" data-ajax="false">  
    <input type="search" id="searchinput" name="searchterm"
        value="" data-mini="true" placeholder="Where?"/>
</form>

<?php
ini_set('display_errors', 1); error_reporting(E_ALL);

include 'connect.php';

$search = ($_POST['searchterm']);
$keywords = explode (" ", $search);
$columns = array("country","name");
$andParts = array();

foreach ($keywords AS $keyword){
    $orParts = array();
    foreach($columns AS $column){
        $orParts[] = $column . " LIKE '%" . ($keyword) . "%'";
    }
    $andParts[]= "(" . implode($orParts, " OR ") . ")";
}

$and = implode ($andParts, " AND ");

$sql = "SELECT * FROM Listing WHERE $and ";

$result = mysqli_query($con,$sql);

$output = array();

// fetch your results
while( $row = mysqli_fetch_assoc($result)) {
    // add result row to your output's next index
    $output[] = $row;
}

// echo the json encoded object
echo json_encode( $output ); 

?>

Answer 1

执行oskr建议的现代方法是使用.preventDefault() -

$("#searchform").submit(function( event ) {
    event.preventDefault();

    $.ajax({
        type: "GET",
        url: "http://test.com/App/searchtest.php",
        dataType:'json',
        success: function(data){ 
            console.log(data);
            $("#content").append(data);
        }
    })
});

Answer 2

你的代码问题是你发送ajax请求并同时提交表单，这意味着链接到php页面，重新加载页面，从而取消ajax成功处理程序。
为避免这种情况，您应该返回false ，这会阻止表单提交，在提交事件处理程序结束时或调用event.preventDefault。
我希望这会有所帮助：

$("#searchform").submit(function( event ) {
    $.ajax({
        type: "GET",
        url: "http://test.com/App/searchtest.php",
        dataType:'json',
        success: function(data){ 
            console.log(data);
            $("#content").append(data);
        }
    })
    return false;
});

Html表单输入发送，然后卡在php页面中

2 个答案: