JQuery / Ajax SQL живое обновление через PHP помощь

Question

У меня есть таблица, которая выводит все мои контакты через цикл while из моей базы данных.

мой синтаксис такой:

SELECT * FROM contacts WHERE id = $_SESSION['user_id'] ORDER BY name ASC LIMIT 5

, который извлекает все мои данные и дает только 5 результатов.

Теперь моя цель состоит в том, чтобы иметь маленькую кнопку, которая открывает окно модели с jquery (этим я могу управлять самостоятельно) с формой, запрашивающей пользователя ввести номер, после чего этот номер будет отправлен по почте или получен в $ PHP_SELF и обновите локальную переменную числом, введенным пользователем, тогда эта переменная будет использоваться для обновления базы данных с целью увеличения или уменьшения значения LIMIT.

Я просмотрел всю сеть (с Google), чтобы найти отправку формы с использованием AJAX, но все примеры, которые я нашел, не работают для меня.

Когда пользователь отправляет число, а SQL-запрос выполняется и обновляется для выходной таблицы, которая динамически обновляется в соответствии с новым значением LIMIT, и все это без обновления страницы для пользователя.

мой код jquery:

(document).ready(function(){
   $("form#form").submit(function() {
   // we want to store the values from the form input box, then send via ajax below
      var val = $('input[name=new_value]').attr('value');
      $.ajax({
          type: "post",
          url: "process.php",
          data: "val="+ val,
          cache: false,
          success: function(){
             $('form#form').hide(function(){$('.success').fadeIn();});
          }
      });
      return false;
   });
});

$(document).ready(function(){ $("form#form").submit(function() {
   // we want to store the values from the form input box, then send via ajax below
   var val =    $('input[name=new_value]').attr('value');
   $.ajax({ type: "post", url: "process.php", data: "val="+ val, cache: false, success:   
   function(){
      $('form#form').hide(function(){$('.success').fadeIn();});
   } }); return false; }); });

тогда мой php код:

$new_val = $_POST['new_val'];
$_val = "UPDATE `settings` SET `display_limit` = {$new_val} WHERE `user_id` = {$_SESSION['user_id']}";
mysql_query($_val) or die(mysql_error());

и моя форма проста:

есть предложения? Я еще не пришел к тому, как динамически обновлять свою исходную таблицу, так что, если кто-нибудь может указать мне правильное направление или оказать некоторую помощь, которая была бы потрясающей.

спасибо

EDIT:

Вот обновленный скрипт jquery, над которым я работал, я могу успешно отправить форму! но моя единственная проблема в том, что я не вижу изменений до тех пор, пока страница не будет обновлена ​​с поражениями с целью использования AJAX ... sigh

как мне теперь обновлять и обновлять мой #results div с содержимым отправки формы?

$(document).ready(function() { 
    var options = {
        url: 'process.php',
        type: 'post',
        //dataType:  'json',
        target: '#last_five_sellers',
        success: success
    };

    // bind to the form's submit event 
    $('#form').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
        // !!! Important !!! 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    });
    function success(responseText, $form) {
        $("form#form").hide();
        $(".success").fadeIn();
    }
});

Answer 1

Вам необходимо понять поток запроса.Как только скрипт php запустится, все готово.Если вы планируете отправить обратно на ту же страницу, это будет новый запрос и новое выполнение этого скрипта.Теперь вы можете добавить специальный сценарий к этому сценарию, чтобы вернуть необходимые данные в ваш код jQuery, но это грязное IMO.Я предпочел бы иметь отдельный скрипт для обработки этой функциональности.Это можно рассматривать как веб-службу.

Таким образом, когда вы переходите на эту страницу в браузере, она будет по умолчанию отображать 5 контактов (или w / e по умолчанию, установленное в предложении LIMIT).Когда вы щелкаете по значку, чтобы отобразить больше контактов, вы используете jQuery для отправки запроса GET на эту страницу «веб-службы» (это действительно должен быть GET, поскольку вы получаете данные, а не отправляете новые).Тогда это будет список контактов, которые вы используете для обновления отображения на странице, используя jQuery / JavaScript.

Как отметил Кодлер, выход из этой «веб-службы» может быть HTML, который вы просто используетезаменить существующий HTML, который отображает контакты.(Это предпочтительный способ. Вы почти всегда хотите делать на сервере столько, сколько можете.)

Answer 2

Похоже, ваш код jQuery дублирован - нет необходимости дважды связывать событие submit формы.Кроме того, в первом блоке jQuery отсутствует открывающий знак доллара («$»).И, насколько я знаю, .hide() не поддерживает передачу обратного вызова через первый параметр.В документации по jQuery API он записан как .hide( duration, [ callback ] ).

. Я бы написал:

$(function(){
   $("form#form").submit(function(){
   // we want to store the values from the form input box, then send via ajax below
      $.ajax({
          type: "post",
          url: "process.php",
          data: "val=" + $("input[name=new_value]").val(),
          cache: false,
          success: function(){
             $("form#form").hide();
             $('.success').fadeIn();
          }
      });
      return false;
   });
});

Теперь, если вы хотите динамически обновлять таблицу результатов, самый простой способ - простозаменить всю вещь с обновленным HTML.Так, например, если вы изменили свой PHP-скрипт (process.php), чтобы после обновления display_limit он выводил новую таблицу результатов, вы могли бы написать что-то вроде (при условии, что ваша таблица результатов table#results):

$(function(){
   $("form#form").submit(function(){
   // we want to store the values from the form input box, then send via ajax below
      $.ajax({
          type: "post",
          url: "process.php",
          data: "val=" + $("input[name=new_value]").val(),
          cache: false,
          success: function(data){
             $("form#form").hide();
             $(".success").fadeIn();
             $("#results").replaceWith(data);
          }
      });
      return false;
   });
});

Вы просто должны убедиться, что ваш скрипт выводит только HTML.

Вопреки ответу Джорджа, приведенному выше, HTML определенно будет работать для этой цели, но я думаю, что идеальный метод - отправлять чистоодни данные (без структуры / представления) в формате JSON или XML, а затем использовать JavaScript для построения HTML;таким образом вы можете сэкономить большую пропускную способность и, в конечном итоге, создать гораздо более гибкое приложение.

РЕДАКТИРОВАТЬ

Вот небольшой пример на основе JSON.

JavaScript:

$(function(){
    $("#form").submit(function(){
        var val = $("input[name=new_value]").val();
        $.getJSON("process.php?val=" + val, function(data){
            $("#results").empty();
            $(data.rows).each(function(){
                $("#results").append('<tr><td>' + this.column_a + '</td><td>' + this.columbn_b + '</td></tr>');
            });
        });
        return false;
    });
});

PHP (process.php):

[assuming you already have a result/rows called $result]
$json = array('rows' => array());
while ($row = mysql_fetch_assoc($result)) {
    $json['rows'][] = $row;
}
echo json_encode($json);

Теперь, конечно, я вообще не тестировал этот код, но он должен дать вам сутьоб этом.

Answer 3

В вашем php-коде, где вы делаете обновление, вы можете отображать ваши контакты в html-формате.Затем это вернулось бы к вашей функции успеха в jquery.

success: function(){
    $('form#form').hide(function(){$('.success').fadeIn();});
}

Функция имеет данные параметра, который является html-форматом, который вы указали в php.Пример

success: function(data){
    $('form#form').hide(function(){$('.success').fadeIn();});
    $(data).appendTo('#result');
}