如何使用jQuery Ajax和Php加載按鈕單擊頁面？

Question

如何在按鈕單擊時加載頁面並使用jquery ajax將數據傳遞到該新頁面並將輸入字段中的值放置到新加載的頁面中？基本上，我的意思是，

我有一個名為SOmething的按鈕，我只想通過單擊此按鈕即可加載show.php頁面，而無需刷新，而我在成功函數中收到的值123應該放置在show.php。中定義的輸入字段中。做到這一點。

的index.php

<div id='page_details'>
<div class="container  border w-25 mt-3 p-2">
 <div class="border p-3 my-3">
    <a class="text-dark call" href='#' id='number'>SOmething</a>
  </div>
 </div>
</div>

  $.ajax({
        url: 'show.php',
        method: 'POST',
        data: {
            number: '123' 
        },
        success: function(data) {
            console.log(data);
            $("#page_details").load('show.php', {
                'data': data
            });  
        }
    });

show.php

獲取未定義的索引號錯誤。

 $number = $_POST['number'];
 $data = $_POST['data'];

<div class="col">
  <p>Amount</p>
  <input class='form-control' value='<?php echo $number ?>'/>  
 <input class='form-control' value='<?php echo $data ?>'/>  //It loads another page within page..
</div>

即使我在控制台中收到數字123，但未在輸入字段中顯示...

問候..

Answer 1

首先：了解“ show.php”文件，在這里您收到了兩個值，因此還需要傳遞data參數，其次：在html標記下的用戶html注釋

現在為您的問題提供以下解決方案，只需使用以下腳本即可：

$("#number").on("click", function(){
 $.ajax({
   url: 'show.php',
   method: 'POST',
   data: {
      number: '123',
      data: 'pankaj' 
     },
   success: function(data) {
   console.log(data);
   $("#page_details").html(data);
  }
 });
});