Question

我有一个表格，其中包含公司名称地址邮政编码等行。

我有一个选项，如果您不知道完整的详细信息，可以输入名称并单击搜索。这将通过AJAX获得具有相似名称的所有公司的列表，并将它们返回到模态窗口（不确定这是否是最佳方法）

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

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

问题是点击后模态上的按钮刷新了原始页面，因为我使用方法=＆＃34; post＆＃34;命令，这将删除原始形式的任何其他数据。

有没有办法关闭模态并更新原始表单而不刷新？

由于

这是我的原始页面：

<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的回声）之前调用

在你的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/>标记。

将按钮的type属性更改为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'] . '">';

而是使用

在JavaScript代码中引用它们

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

没有刷新的多个AJAX请求

2 个答案: