Question

我正在建立一个网站，在某些部分中，我需要用户在页面中选择三个选择元素中的三个选项，然后单击搜索按钮以在数据库中搜索用户想要的内容。但是php不需要从表单获取数据而不设置按钮的类型来提交..，这将导致按钮重新加载页面..但是我不希望重新加载页面。

我试图将表单的操作设置为处理数据的php文件，但这会使情况变得更糟，如果单击搜索按钮，则会将用户重定向到php文件

表单的html代码

<form method="post">
   <select class="select_box">
     <option value="Choose a category">Choose a category</option>
     <option value="category1">category1</option>
     <option value="category2">category2</option>
     <option value="category3">category3</option>
   </select>
   <select class="select_box">
     <option value="Choose a place">Choose a place</option>
     <option value="place1">place1</option>
     <option value="place2">place2</option>
     <option value="place3">place3</option>
     <option value="place4">place4</option>
   </select>
   <select class="select_box">
     <option value="Choose budget">Choose budget</option>
     <option value="budget1">budget1</option>
     <option value="budget2">budget2</option>
     <option value="budget3">budget3</option>
     <option value="budget4">budget4</option>
   </select>
   <button type="button" name="search_btn">Search</button>
</form>

我希望页面no根据php文件的搜索结果重新加载并显示数据，但是实际上发生的是页面重新加载，但是期望的数据显示在为它指定的位置

Answer 1

您可以使用Ajax，因为它允许您更新网页而无需重新加载页面

将此添加到您的活动中

$.ajax({
  url: 'yourphpfile.php',
  //get or post
  type: 'post',
  data: {
   //name & password optional
    name: 'yourinputdata',
    password: 'yourinputpassword'..
  },
  success: function(response) {
    location.reload(); // reloading page
  }
});

在php文件中，使用isset（$ _ POST ['name']）和isset（$ _ POST ['password']）可以确保您接收到值并根据需要对其进行操作。

Answer 2

您要寻找的是AJAX。您要做的是使用JavaScript发布表单内容，然后该函数等待PHP页面的响应。

这是出于这个原因而使用的一小段代码。您可以轻松地对此进行修改以适合您自己的形式：

    function sendMessage(formName) {
//Put the name of your form here - make sure your FORM has a NAME and ID tag
        formIs = document.quoteSubmitForm;

          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
             //Run this part to display the response to the user.
             innercontent = "<span class='close' onclick='closeModal()'>&times;</span>" + xhttp.responseText;
             document.getElementById("modalContent").innerHTML = innercontent;
            }

          };
//Use this to fill in the name of the PHP which you intend to POST to.
          xhttp.open("POST", "quotes/submitnew.php");
          xhttp.send(new FormData (formIs));
        }

如何将数据从html5表单发送到php页面进行处理，而不必重新加载页面或转到php页面

2 个答案: