Question

我有一个ajax调用，该调用检索数据并将其插入所需的div框中。但是，我只能在成功方法中使用一个参数来获取数据，而不能使用多个参数。一个超级坏/便宜的解决方案是多个ajax调用，但是我只知道有一个比创建不同的调用/脚本来以这种方式获取我的数据更简单，更省力的解决方案。如上所述，我还尝试了使用多个参数，希望这可能行得通。

我的ajax调用看起来像这样：

function retrieveQuestion() {

$.ajax({
    url: 'getSpecificPost.php',
    type: 'POST',
    success: function(response) {
        console.log(response);
    }
});
}

我的php脚本看起来像这样（考虑到脚本的工作原理，它不是全部，而我的主要问题是如何将某些数据附加到某些div）：

    $sqli = 'SELECT * FROM posts WHERE title = ?';
    $stmt = mysqli_stmt_init($conn);

    if (!mysqli_stmt_prepare($stmt, $sqli)) {
        echo 'Error no stmt prepared';
        exit();
    } else {
        mysqli_stmt_bind_param($stmt, 's', $title);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
        $resultCheck = mysqli_num_rows($result);

        if ($resultCheck > 0) {
            if ($row = mysqli_fetch_assoc($result)) {
                echo $row['title'];
                echo $row['name'];
                echo $row['id'];
            }
        }

所以说，我有3个div框，它们已经制作好了，所以不会动态创建。

我想将$ row ['title']附加到具有ID标题的div框上，将$ row ['name']附加到具有ID名称的div框上，并将$ row ['id' ]转到具有ID为ID的div框。

Answer 1

由于Ajax一起响应了所有数据。您有两个选择可以做... 1.在服务器php页面中构建html div，然后直接在想要更新的div中插入。 2.您必须处理复杂的JavaScript和json数据...接收json格式的数据，然后手动将其放在所需的位置。但我建议第一种方法是在服务器中创建具有各自ID的div，并在成功事件直接将其插入div

Answer 2

您是否尝试过返回包含所有数据的JSON？像这样：

echo '{ title:', $row['title'], ', name: ', $row['name'], ', id: ', $row['id'], ' }'

如果您不想自己构建JSON，也可以创建一个对象并使用json_encode。

然后，您可以在JavaScript中将成功函数更改为此：

success: function(response) {
    response = JSON.parse(response); // converts string to Object
    for(var property in response) { // loops for title, name and id
        // Sets the text of the element with id: "title", "name" or "id"
        document.querySelector("#" + property).textContent = result[property];
    }
}

JavaScript中的代码将JSON从字符串解析为Ob

Answer 3

JSON

JSON是一种人类可读的文本格式，通常用于服务器和客户端之间的数据传输。

PHP中的 json_enocde（）函数将数组转换为json字符串，而JavaScript中的 JSON.parse（）函数将json字符串转换为具有以下内容的对象数组填充其中的适当值。

相当于json_encode（）的Javascript是 JSON.stringify（），而相当于PHP.JSON.parse（）的Javascript是 json_decode（）。

PHP

$sqli = 'SELECT * FROM posts WHERE title = ?';
$stmt = mysqli_stmt_init($conn);

if (!mysqli_stmt_prepare($stmt, $sqli)) {
    echo 'Error no stmt prepared';
    exit();
} else {
    mysqli_stmt_bind_param($stmt, 's', $title);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $resultCheck = mysqli_num_rows($result);

    if ($resultCheck > 0) {

        $json_response = [];

        if ($row = mysqli_fetch_assoc($result)) {
            $json_response[] = $row;
        }

        //Echo data as JSON
        echo json_encode($json_response);
    }

JavaScript

    function retrieveQuestion() {
        $.ajax({
           url: 'getSpecificPost.php',
           type: 'POST',
           success: function(response) {

               response = JSON.parse(response);

               $("#title").text(response[0].title);
               $("#name").text(response[0].name);
               $("#id").text(response[0].id);
           }
        });
    }

Answer 4

尝试在php中将其作为一个字符串发送，并使用逗号，然后在您的ajax中使用以下代码：

$.ajax({
    url: 'getSpecificPost.php',
    type: 'POST',
    success: function(response) {
         var data = response.split(",");
         $('#title').val(data[0]);
         $('#name').val(data[1]);
         $('#id').val(data[2]);
    }
});
}

Answer 5

尝试在ajax成功时访问DOM html。看这个例子：

编辑您的php并设置“ return $ row”

//...
if ($resultCheck > 0) {
            if ($row = mysqli_fetch_assoc($result)) {
               return $row
            }
        }

//here is your Succes ajas response
//success: function(response) {
 
var response=[];//this line is not necesari , i write because i dont hae response;
response['name'] ='testName';
response['title'] ='testtitle';
response['id'] ='testid';
$('#title').html(response['title']);
$('#name').html(response['name']);
$('#id').html(response['id']);
//   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="title"></div>
<div id="name"></div>
<div id="id"></div>

Answer 6

如果我理解正确，则希望使用从服务器获得的响应来动态更新静态页面。

使用JavaScript创建HTML并为其添加值
由于您使用的是非常好的DOM操作库jquery，因此可以按原样使用HTML。并在收到回复后更新DOM

-注意-我只是想复制您的问题并向您展示可能的方法。

尝试在输入框中输入任何产品名称

//Suppose your response contains this form of data

let products = [
	{id : '1', product_name : 'amazon', img : 'something'},
	{id : '2', product_name : 'snapdeal', img : 'something'},
	{id : '3', product_name : 'google', img : 'something'}  
]
let input = $('#search')
input.keyup(function(){
	let showingContacts;
  if($(this).val()){
    let match = new RegExp($(this).val())
    showingProducts = 	products.filter(product=> match.test(product.product_name))
    }else
    	showingProducts = products
  updateDom(showingProducts)
})

const updateDom = products =>{
	$('.contents').html('')
	products.forEach(product =>{
  	$('.contents').append(`<div class="card">
    <h1 id="title">${product.product_name}</h1>
  </div>`)
  })
}
updateDom(products)

.contents {display: flex; flex-flow: wrap;}

.card {
background: wheat;
padding: 1.875rem;
margin-right: 10px;
margin-bottom: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="search">

<div class = "contents">
</div>

Answer 7

您可以通过创建包含所有行的数组并将其编码为JSON来从服务器返回JSON

$sqli = 'SELECT * FROM posts WHERE title = ?';
$stmt = mysqli_stmt_init($conn);

if (!mysqli_stmt_prepare($stmt, $sqli)) {
   echo 'Error no stmt prepared';
   exit();
} else {
   mysqli_stmt_bind_param($stmt, 's', $title);
   mysqli_stmt_execute($stmt);
   $result = mysqli_stmt_get_result($stmt);
   $resultCheck = mysqli_num_rows($result);

   if ($resultCheck > 0) {

      $response = [];

      if ($row = mysqli_fetch_assoc($result)) {
         $response[] = $row;
      }
      //Return the array as json
      print json_encode($response);
   } 
}

然后，当您收到响应时，可以使用ajax调用的成功方法遍历响应

function retrieveQuestion() {
    $.ajax({
       url: 'getSpecificPost.php',
       type: 'POST',
       success: function(response) {
           $("#title").html("<ul>");
           $("#name").html("<ul>");
           $("#id").html("<ul>");
           for (var val in response) {
               if (response.hasOwnProperty(val)) { 
                   $("#title").append("<li>"+response[val].title+"</li>");
                   $("#name").append("<li>"+response[val].name+"</li>");
                   $("#id").append("<li>"+response[val].id+"</li>");
               }
           }
           $("#title").append("</ul>");
           $("#name").append("</ul>");
           $("#id").append("</ul>");
       }
    });
}

如何将我的Ajax响应值插入特定的div元素？

7 个答案: