模态的Wordpress搜索结果

Question

我是一个完整的 php/js 新手，但我遇到了一些我无法弄清楚的问题。

我在 www.test.com/page 上有一个页面，其中有一个像这样调用 www.test.com/results 的搜索表单：

<form method="post" action="https://www.test.com/results">
    <input type="text" placeholder="Enter URL:" required="">
    <button>Search</button>
</form>

表单获取用户输入的 URL，将其传递给/results，($url = $_POST['url'];) 行是对其进行分析并显示结果的位置。

但是，我希望搜索结果以（引导）模式而不是新页面打开。我知道这可以用 AJAX 来完成，但我是个新手，我正在寻找最肮脏的简单解决方案来让它工作。

再次，对不起，如果这是太“新手”类型的问题，我还在学习。

Answer 1

是的，您可以使用 jQuery 和 AJAX 来控制表单提交。所以类似于下面的代码示例应该可以解决问题：

$('#myForm').on('submit', function(event) {

    $.post('https://www.test.com/results', { URL: "some_url.com" }, function(data) {
        // Render the results onto your modal anyway you want with data 
        // retrieved from server here
        $("#my-modal-object").html(data);
    }).error(function() {
        // Handle the event when the call to "/results" fails
        alert("Yikes! Call to /results failed!");
    });

    // Prevents default browser behaviour which submits the form 
    // then routes to another page, if specified
    event.preventDefault();

});

简短说明：

我们将"submit" 事件侦听器附加到您的表单对象，并对您的服务器端点/results 执行了一个POST AJAX 请求。服务器将处理后的搜索结果传递回$.post 的回调函数，并将其呈现到您的模态对象上。您还可以将$.post 的第二个参数，即{ URL: "some_url.com" } 更改为您想要传递给服务器的任何数据对象。

这应该可以帮助您开始将搜索结果呈现到模态元素上，而不是导航到新页面。