多个AJAX请求，而无需刷新

Question

我有一个包含公司名称地址邮编等

行我有一个选择：如果你不知道的全部细节，你可以输入名称，然后单击搜索的形式。这将通过AJAX获得所有具有相似名称的公司列表，并将它们返回到模式窗口（不知道这是否是最好的方法）

列表中的每个公司都在其旁边有一个按钮，以便启用用户选择该公司。

点击所需公司后，表单关闭，我希望完成原始页面上的地址详细信息。

问题是被点击后的模式按钮刷新原来的页面，因为我使用method =“post”命令，这是删除任何其他原始形式的数据。

有没有办法关闭模式和更新原始窗体而不刷新？

感谢

这是我原来的页面：

<input type="text" id="text1"><button id="button"> Search </button> 
<input type="text" id="Address1"> 
<input type="text" id="Address2"> 
<input type="text" id="Country"> 
<input type="text" id="PostCode"> 



<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Companies Found</h4> 
    </div> 
    <div class="modal-body"> 
    <div id="result"></div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
</div> 

<script> 
$('#button').click(function() { 
    var val1 = $('#text1').val(); 
    $.ajax({ 
     type: 'POST', 
     url: 'api.php', 
     data: { text1: val1}, 
     success: function(response) { 
     $("#myModal").modal('show'); 
      $('#result').html(response); 
     } 
    }); 
}); 
</script> 

这是页面我通过AJAX调用：

$company_name= $_POST['text1'] ; 
$api_key = 'xxx'; // Get your API key from here:  https://developer.companieshouse.gov.uk 

$api = new companiesHouseApi($api_key); 
$response = $api->send('/search/companies', ['q' => $company_name]); // Process API request 

echo'<style type="text/css">'; 
echo'.tg {border-collapse:collapse;border-spacing:0;}'; 
echo'.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}'; 
echo'.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}'; 
echo'.tg .tg-yw4l{vertical-align:top}'; 
echo'</style>'; 

echo'<table class="tg">'; 

foreach($response['items'] as $key){ 
echo' <form action="search.php" method="post">'; 
echo' <tr>'; 
echo' <th class="tg-031e">'.$key['title'] . "<br>".'</th>'; 
echo' <th class="tg-031e" rowspan="3"> <input type="submit" value="Submit"></th>'; 
echo' </tr>'; 

echo' <tr>'; 
echo' <td class="tg-yw4l">'.$key['description'] . "<br>".'</td>'; 
echo' </tr>'; 

echo' <tr>'; 
echo' <td class="tg-yw4l">'.$key['address_snippet'] . "<br>".'</td>'; 
echo' </tr>'; 
echo' </form>'; 
} 

echo'</table>'; 

Answer 1

设置形式的行动到你的页面上D转换您的JavaScript为这样的功能：

<script> 
function ajaxcall() { 
var val1 = $('#text1').val(); 
$.ajax({ 
    type: 'POST', 
    url: 'api.php', 
    data: { text1: val1}, 
    success: function(response) { 
    $("#myModal").modal('show'); 
     $('#result').html(response); 
    } 
}); 
}); 
</script> 

过程在PHP的形式和检查，看看是否该字段为空（这里做你的表单处理）。 如果他们是空白，从PHP调用JavaScript函数如下：

echo '<script type="text/javascript">', 
'ajaxcall();', 
'</script>' 
; 

如果表单具有所需的字段，处理数据，并根据需要用它来重定向到另一页：

header('Location: destination.php') 

这是很重要的，上面的语句必须在任何HTML代码调用（包括PHP的echo）

在你的Ajax PHP页面，我会建议使用一个变量使1串数据，然后呼应一旦变量例如：

$str = ''; 
$str .= ' <tr>'; 
$str .= ' <td class="tg-yw4l">'.$key['address_snippet'] . "<br>".'</td>'; 
$str .= ' </tr>'; 
echo $str; 

Answer 2

它重新加载页面的原因是因为您在表单中包装的表格行内使用了提交按钮。

首先，这是错误的HTML <tr></tr>标签不应该立即包裹在<form></form>标签。但更重要的是，如果你在表单中有一个提交按钮，它会在点击时提交表单（除非你使用JavaScript来阻止它）。

这里是我建议你这样做：

PHP

删除<form/>标记围在表中的行包。

将您的按钮的类型属性更改为button。大多数浏览器会将其视为非提交按钮。

将一个类附加到需要复制到表单中的表单元格中。为了演示，我们给出了最后一个表格单元address类。我们正在附上一个课程以供日后参考。

foreach ($response['items'] as $key) { 
    echo '<tr>'; 
     echo '<th class="tg-031e">'. $key['title'] . '<br></th>'; 
     echo '<th class="tg-031e" rowspan="3"><input type="button" value="Submit"></th>'; 
    echo '</tr>'; 

    echo '<tr>'; 
     echo '<td class="tg-yw4l">'. $key['description'] . '<br></td>'; 
    echo '</tr>'; 

    echo '<tr>'; 
     echo '<td class="tg-yw4l address">'. $key['address_snippet'] . '<br></td>'; 
    echo '</tr>'; 
} 

JS

利用event delegation附加事件处理程序动态创建的元素。我们将附加一个onclick事件处理程序到您的表格按钮。 （1）使用按钮的表格行作为参考的起点，关闭带有公司信息的模式（2）填充表单作为开始点。我不知道什么地址片段，但下面应该告诉你如何将表格行中的内容复制到表单中。

$('#button').click(function() { 
    $.ajax({ 
     type: 'POST', 
     url: 'api.php', 
     data: { 
      text1: $('#text1').val() 
     }, 
     success: function (response) { 
      $("#myModal").modal('show'); 
      $('#result').html(response); 
     } 
    }); 
}); 

$('#myModal').on('click', 'table.tg input[type=button]', function() { 
    // get table row containing the button 
    var $tr = $(this).closest('tr'); 
    // close modal 
    $('#myModal').modal('hide'); 
    // populate form 
    $('#Address1').val($tr.find('.address').text()); 
}); 

额外

您可以在这里找到有用的HTML5 data attributes。您可以将公司信息存储在<tr>中。

echo '<tr data-address1="' . $key['address1'] . '" data-address2="' . $key['address2'] . '">'; 

，而是使用

$('#Address1').val($tr.data('address1')); 
$('#Address2').val($tr.data('address2'));