多個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'));