Question

我有一个搜索PHP页面，上面有一个搜索表单，如下所示（我删除了Bootstrap类）

<form id="searchform" name="search" role="form" action="/Search" method="post">
    <input type="text" class="form-control" name="keywords" placeholder="keywords e.g. some words here"/>
    <input type="hidden" id="location" value="" class="county" name="location[]" />
    <button class="btn btn-primary btn-lg" type="submit" name="search_button" id="searchbutton">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        &nbsp;&nbsp;SEARCH
    </button>
 </form>

在此搜索页面上，我在顶部有相同的搜索表单，结果显示在右栏中，左侧是复选框列表，并选择名为AJAX并优化搜索。调查结果加载在名为displaylisting的div中。

 $(document).ready(function() {
$('# list here comma separated').on('change',function(){
     $.ajax({
        type: "POST",
        url: "ajaxlistings.php",
        contentType: 'application/x-www-form-urlencoded',
        data: $("#formID").serialize(),
        cache: false,
        dataType: 'html',
        success: function(data){
            console.log(data);
            $('#displaylisting').html(data);
        },
        error: function (xhr, status, error) {
            alert("Sorry, there was a problem!: " + error);
            console.log(xhr.status);
               console.log(xhr.responseText);
               console.log(error);
        },
        complete: function (xhr, status) {
            //$('#showresults').slideDown('slow')
        }
    });
    return false;
});

/* Search button clicked */
$("#searchbutton").click(function() {
    $.ajax({
        type: "POST",
        url: "ajaxlistings.php",
        contentType: 'application/x-www-form-urlencoded',
        data: $("#formID").serialize(),
        cache: false,
        dataType: 'html',
        success: function(data){
            console.log(data);
            $('#displaylisting').html(data);
        },
        error: function (xhr, status, error) {
            alert("Sorry, there was a problem!: " + error);
            console.log(xhr.status);
               console.log(xhr.responseText);
               console.log(error);
        },
        complete: function (xhr, status) {
            //$('#showresults').slideDown('slow')
        }
    });
    return false;
});

在search.php页面上测试时，所有这一切都正常。

这是我的问题：

逻辑上，要访问此搜索页面，在我的index.php上我也有相同的搜索表单。

我想要的是，当用户点击我的index.php页面上的搜索表单时，他们会被带到search.php页面（它目前在操作中正在进行）但是我想在这里调用AJAX调用显示列表。

这可能吗？作为一种解决方法，我在我的主页上创建了一个隐藏变量并设置为1，当提交到搜索PHP页面时，它调用与此值为1时ajaxlisting.php中相同的PHP代码。但这似乎适得其反ajaxlisting.php会为我做这个工作。

我搜索了论坛但找不到我的问题的答案。

Answer 1

为此，您可以将搜索到的值放在keywords输入中，然后触发onchange事件

HTML（请注意，您需要在此清理回声以防止XSS）

<input type="text" class="form-control" name="keywords" placeholder="keywords e.g. some words here" value="<?php echo $_POST['keywords']; ?>"/>

JS

$("[name='keywords']").trigger('change');

Answer 2

到目前为止，根据链接中的注释（How to submit form on one page to a different page using ajax call in jquery），我在搜索PHP页面上有这个来从PHP页面中捕获POST：

$method = $_SERVER['REQUEST_METHOD'];
if($method == 'POST')
{
echo $method . " - Send to AJAX\n\n";
$fromhome = 1;
}
else
   exit;

然后在SCRIPT标签的标题中我有：

var fromhome = <?php echo $fromhome; ?>;
if(fromhome == 1)
   CallAjax();

function CallAjax(){ 
     console.log('From home' + fromhome);
     $.ajax({
        type: "POST",
        url: "ajaxlistings.php",
        contentType: 'application/x-www-form-urlencoded',
        data: $("#formID").serialize(),
        cache: false,
        dataType: 'html',
        success: function(data){
            console.log(data);
            $('#displaylisting').html(data);
        },
        error: function (xhr, status, error) {
            alert("Sorry, there was a problem!: " + error);
            console.log(xhr.status);
            console.log(xhr.responseText);
            console.log(error);
        },
        complete: function (xhr, status) {
            //$('#showresults').slideDown('slow')
        }
    });
    return false;
  }
}

但是萤火虫是一个错误：

ReferenceError: $ is not defined
$.ajax({

Answer 3

我把它分类了。

这就是我所做的。在我的搜索PHP页面上，我有：

 $method = $_SERVER['REQUEST_METHOD'];
 if($method == 'POST')
   $fromhome = 1;
 else
    exit;

并在标题中：

<script> var fromhome = <?php echo $fromhome; ?>; </script>

我的所有JQUERY和脚本都在页脚PHP页面中，所以在这里我有：

$(document).ready(function() {
if(fromhome == 1)
  {
    console.log('From home: ' + fromhome);
    CallAjaxFunction();
  }

function CallAjaxFunction(){ 
alert("here");
     $.ajax({
        type: "POST",
        url: "ajaxlistings.php",
        contentType: 'application/x-www-form-urlencoded',
        data: $("#formID").serialize(),
        cache: false,
        dataType: 'html',
        success: function(data){
            console.log(data);
            $('#displaylisting').html(data);
        },
        error: function (xhr, status, error) {
            alert("Sorry, there was a problem!: " + error);
            console.log(xhr.status);
            console.log(xhr.responseText);
            console.log(error);
        },
        complete: function (xhr, status) {
            //$('#showresults').slideDown('slow')
        }
    });
    return false;
}   ...

所以现在它工作正常，当从索引PHP页面通过帖子执行搜索时调用AJAX函数，然后在搜索PHP AJAX调用中执行其余操作。

从前一页的表单调用jquery函数

3 个答案: