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

将表单操作设置为您所在的页面，并将您的 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) 使用按钮的表格行作为参考点，使用公司信息填充表单。我不知道 sn-p 是什么地址，但下面应该向您展示如何将表格行中的内容复制到表单中。

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

而是在你的 JavaScript 代码中引用它们

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