使用AJAX将表单数据发布到PHP页面

Question

我只是试图使用搜索表单中提交的数据来查询数据库并返回类似于搜索的结果。 我的表单看起来像这样：

 <div id="searchform">
    <form method="get">
    <form id="submitsearch">  
    <input id="shop" name="shop" type="text" placeholder="Find a shop" />
    <input id="submitbutton" type="submit" value="Go"/>   
    </form>
    </form>
    <div id="searchresults">
    </div>
 </div>

我得到的Javascript是：

$("#submitsearch").submit(function(event) {
            event.preventDefault();
                $("#searchresults").html('');
                var values = $(this).serialize();
                    $.ajax({
                    url: "external-data/search.php",
                    type: "post",
                    data: values,
                    success: function (data) {
                    $("#searchresults").html(data);
                    }
                    });
                });
    return false;

我也试过......

   $("#submitbutton").click(function(){
            var form_data = $("#submitsearch").serialize();
            $.ajax({
            url: "external-data/search.php",
            type: 'POST',
            data: form_data,
            success: function (data) {
              $("#searchresults").html(data);
            }
    });
    return false;
  });

这似乎稍微有效，因为它显示结果，第一个没有做任何事情。 它不是将数据发送到PHP页面，但我得到的PHP是：

<?php 
    $str_shops = '';
    $shop = $_POST['form_data'];
    mysqli_select_db($db_server, $db_database);
    $query = "SELECT * FROM shops WHERE name LIKE '%$shop%'"; 
    $result = mysqli_query($db_server, $query); 
        if (!$result) die("Database access failed: " . mysqli_error($db_server)); 
        while($row = mysqli_fetch_array($result)){ 
    $str_shops .= "<strong>" . $row['name']  . "</strong><br>" .
    $row['address'] . "<br><br>"; 
 } 

mysqli_free_result($result); 
echo $str_shops; 
mysqli_close($db_server); 
?> 

任何帮助将不胜感激！ 提前致谢。

Answer 1

你有两个表单标签。 这不行。 您想要一个具有两个属性的表单标记

<form method="get">
<form id="submitsearch">  

至

<form method="get" id="submitsearch">  

Answer 2

你可以不使用html表单。 首先你调用php页面，然后在html中显示数据。 这就是我做的事情！！

<div> 
 <input id="shop" type="text" placeholder="Find a shop" />
    <input id="submitbutton" type="button" value="Go"/>   
</div>
 <div id="searchresults">
 </div>

<script type="text/javascript">
$(function() {
$("#submitbutton").click(function(){
try
  {
    $.post("root/example.php",
      {
         'shop':$("#shop").val().trim()

     }, function(data){
           data=data.trim();
      $("#searchresults").html(data);
// this  data is data that the server sends back in case of ajax call you 
//can send any type of data whether json or json array or any other type 
//of data

         });
    }
    catch(ex)
    {
        alert(ex);
    }
  });


});
</script>