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>

表格获取用户输入的网址，将其传递给/results，线($url = $_POST['url'];)就是分析结果并显示结果。

但是，我希望搜索结果在（bootstrap）模式而不是新页面中打开。我知道这可以用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" }更改为您要传递给服务器的任何数据对象。

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

Wordpress搜索结果为模态

1 个答案: