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

Html form input sent, then stuck in php page

本文关键字：php 然后 输入 表单 Html      更新时间：2023-09-26

我的情况如下，我在Jquery Mobile页面中输入了一个表单，而我提交的表单没有表单按钮。我需要php返回的结果（它在JSON中）返回到html中。但是，当我按下enter按钮提交搜索时，它链接到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 ); 
?>

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

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

$("#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;
});
相关文章：