AJAX 加载到另一个具有变量的 div答案

【问题标题】：AJAX load to another div with variableAJAX 加载到另一个具有变量的 div
【发布时间】：2020-05-09 01:01:07
【问题描述】：

嘿，我正在尝试使用传递变量加载另一个 div。我在 div#main 中，我想要一个单击 #modifybtn 按钮后传递 btn 值并使用另一个 div#modify 加载它并使用一些查询。我是 jQuery 和 ajax 的菜鸟，我在网上搜索但无法获得解决方案。请检查相关代码并告诉我问题。

这里是 div#main #modifybtn 按钮和 div#modify

<div id=main>
 <button id="modifybtn" value="some_value" >Modify</button>
</div>

<div id="modify">
<?php 
$resultmodi=$conn->query("SELECT * FROM vacancy WHERE vc_id='{$_GET['id']}' LIMIT 1 ");
?>
</div>

dashcompany.php 里面

<div class="contentcm" >
//contentcm.php page load content here
</div>

这是我的 jQuery，点击按钮后会显示警报，但不会重定向到 #modify div

$(document).ready(function(){
    $('.contentcm').load('contentcm.php #main');

    $('a').click(function(){  //main and modify division in contentcm.php 
        var clickedLink1 = $(this).attr('id');
        $('.contentcm').load('contentcm.php #' + clickedLink1);
    });
});

$(document).on("click", '#modifybtn', function(event) { 

  var id = $(this).val();
  alert(id);
  event.preventDefault(); 
  $.ajax({
    url: 'dashcompany.php',
    type: 'get',
    data: {'id' : id},
      success: function(response) {
        $('#modify').html(response); 
      }
  });
});

【问题讨论】：

这种方式正确吗？还是我走错了路？
在阅读您的问题后，单击#modifybtn 后我得到的是，jquery ajax 请求响应应该在#modify 中加载。那正确吗？并且#modifybtn 和#modify 是在同一个页面还是在外部页面。
dashvompany.php 中是否有#modify div？或者如果不能，您可以在 dashvompany.php 中提供该代码部分
您必须在初始 PHP 文件中定义 <div id="modify">。在 dashcompany.php 文件中获取数据并在该文件中创建相应的 HTML 组件。因此此 HTML 代码将返回到 AJAX 响应，并且将在主 HTML 中添加相同的代码。
@LakmalBodhinayaka 很抱歉那个家伙。我才提到这些更新。**第一次我不能正确地解决我的问题。**这个原因我更新了这个。感谢你试图帮助伙计。还有 varunteja-M.V.T

标签： php jquery ajax load

【解决方案1】：

这将是 initial.html 文件

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "FILE_NAME.js"></script>
</head>
<body>
<div id=main>
 <button id="modifybtn" value="some_value" >Modify</button>

<div id="modify"></div>

</div>

</body>
</html>

您在 FILE_NAME.js 中的代码应该是这样的

$(document).on("click", '#modifybtn', function(event) { 
  var id = $(this).val();
  alert(id);
  event.preventDefault(); 
  $.ajax({
    url: 'dashcompany.php',
    type: 'get',
    data: {'id' : id},
      success: function(response) {
        $('#modify').html(response); 
      }
  });

您的 js 文件将从 dashcompany.php 加载数据并加载到 initial.html 文件中的#modify

dashcompany.php

<?php
include_once('connection.php');
$id = $_GET['id'];
$resultmodi=$conn->query("SELECT * FROM vacancy WHERE vc_id='$id' LIMIT 1 ");
$row = $resultmodi->fetch_assoc();
echo "Name: " . $row["name"];
''' print data whatever you need '''
$conn->close();
?>

原因：可能是您忘记在 dashcompany.php 文件中打印数据，这就是您从 ajax 请求得到空白响应的原因。

别忘了在 #main#modify div 所在的同一个 html 文件中包含 #modify div

【讨论】：

【解决方案2】：

你可以使用如下代码，我建议你使用post方法

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

<button type='button' id="modifybtn" class='btn btn-info' value="some_value">click here</button>


<div class="" id="modify"></div>

<script type="text/javascript">
 $(document).on("click", '#modifybtn', function(event) {
 var  id = $(this).val();
 //alert(id);
 $.ajax({
 url: 'dashcompany.php',
 type: 'post',
 data: {'id' : id},
 dataType: 'json',
 success: function(response) {
    //now you can call with column name of data table
   $('#modify').html("<P>"+response.column_one_name+"</p><br><P>"+response.column_two_name+"</p>");
   }
  });
});
</script>

你的 dashcompany.php 页面应该是这样的，

<?php 
 // $localhost = "127.0.0.1";
 // $username = "root";
 // $password = "";
 // $dbname = "db_304";
 // 
 // $connect = new mysqli($localhost, $username, $password, $dbname);
 // // check connection
 // if ($connect->connect_error) {
 //     die("Connection Failed : " . $connect->connect_error);
 // }

 $id = $_POST['id'];
 
 $sql = "SELECT * FROM vacancy WHERE vc_id = '$id' LIMIT 1 ";
 $result = $connect->query($sql);

 if ($result->num_rows > 0) {
    $row = $result->fetch_array();
 } // if num_rows

 $connect->close();

 echo json_encode($row);

希望这会对你有所帮助。

【讨论】：