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

我只是尝试使用搜索表单中提交的数据来查询数据库，并返回与搜索类似的结果。我的表单如下所示：

 <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>

我也试过

   $("#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是：

$("#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;

<?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); 
?> 

---

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

您有两个表单标签。这行不通。您需要一个带有两个属性的表单标记

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

到

---

无需使用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>

$（函数（）{
$（“#提交按钮”）。单击（函数（）{
尝试
{
$.post（“root/example.php”，
{
‘shop’：$（“#shop”）.val（）.trim（）
}，函数（数据）{
data=data.trim（）；
$（“#搜索结果”）.html（数据）；
//这些数据是服务器在ajax调用您时发回的数据
//可以发送任何类型的数据，无论是json、json数组还是任何其他类型的数据
//数据量
});
}
捕获（ex）
{
警报（ex）；
}
});
});

A

print\r（$\u POST）和
console.log（数据）在您的AJAX成功函数中，将准确显示发送到PHPWhy的内容您的表单是否嵌套在另一个表单中？您的第一个javascript代码片段是正确的（尽管我不确定返回false的
是为了什么；
），您应该在
$\u POST['shop']
中查找数据，而不是
$\u POST['form\u data']
@KevinB nice spot-HTML规范不允许嵌套表单，所以这可能是你遇到麻烦的原因too@susheel-将其作为答案发布，不要修改人们问题中的代码…删除method=“get”默认情况下是get，正如您所知…从他从ajax发布数据的方式来看。@susheel-我认为有两个表单标记才是真正的问题
<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>