Question

如何在单击按钮时加载页面并使用jquery ajax将数据传递到该新页面并将输入字段中的值放置到新加载的页面中？。基本上，我的意思是，

我有一个名为SOmething的按钮，我只想通过单击此按钮即可加载show.php页面而不刷新，并且我在成功函数中收到的值123应该放置在show.php.so中定义的输入字段中我已经做到了。

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);
  }
 });
});

如何使用jQuery Ajax和Php加载按钮单击页面？

1 个答案: