时间戳

首页 > 解决方案 > 如何使用 jquery ajax 和 Php 在按钮单击时加载页面？

javascript - 如何使用 jquery ajax 和 Php 在按钮单击时加载页面？

问题描述

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

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

索引.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
            });  
        }
    });

显示.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 号，但没有在输入字段中显示...

问候..

标签： javascriptphpjqueryajax

解决方案

第一：了解“show.php”文件，这里你收到了两个值，所以你还需要传递数据参数，第二：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);
  }
 });
});

推荐阅读