Как я могу вставить свои значения ответа ajax в определенный элемент div? - PullRequest
0 голосов
/ 30 января 2019

У меня есть вызов 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'] для блока div с идентификатором title, $ row ['name'] для блока div с идентификатором name и поле с $ row ['id'] для блока div с id,ID.

Ответы [ 7 ]

0 голосов
/ 30 января 2019

Если я правильно понял, вы хотите динамически обновить вашу статическую страницу с ответом, полученным с сервера.

  • Создать HTML с помощью Javascript и добавить к нему значения
  • Так как вы используете jquery, которая является действительно хорошей DOM библиотекой манипуляций, вы можете иметь 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>
0 голосов
/ 30 января 2019

Вы можете вернуть 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>");
       }
    });
}
0 голосов
/ 30 января 2019

Попробуйте получить доступ к вашему DOM html, когда ajax будет успешным.Посмотрите на этот пример:

Отредактируйте ваш 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>
0 голосов
/ 30 января 2019

попробуйте отправить его как одну строку в 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]);
    }
});
}
0 голосов
/ 30 января 2019

JSON

JSON - это читаемый человеком текстовый формат, обычно используемый для передачи данных между сервером и клиентом.

json_enocde () функция в PHP преобразует массив в строку json, а функция JSON.parse () в javascript преобразует строку json в массив объектов с соответствующими значениями, заполненными в ней.

Javascriptэквивалент json_encode () равен JSON.stringify () , а PHP эквивалент JSON.parse () равен 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);
           }
        });
    }
0 голосов
/ 30 января 2019

Вы пытались вернуть JSON со всеми данными?Примерно так:

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

Вы также можете создать объект и использовать json_encode, если вы не хотите создавать JSON самостоятельно.

Тогда в вашем 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

0 голосов
/ 30 января 2019

Поскольку Ajax отвечает, все данные вместе.У вас есть два варианта сделать ... 1. Создайте свои HTML-div'ы на странице php сервера и вставьте их непосредственно в желаемый div, где вы хотите обновить.2. Вам нужно пройти через сложные данные JavaScript и json ... Получать данные в формате json, а затем вручную вводить их в нужное место.Но я предлагаю первый вариант - создать свой div с соответствующими идентификаторами на сервере и в случае успеха напрямую вставить его в div

.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...