AJAX не отправляет fom

Question

Я работаю со сценарием, в котором я могу отправить форму без перезагрузки страницы с помощью AJAX. Проблема в том, что форма не отправляется в базу данных. Любая помощь будет оценена по достоинству. Я испортил коды, но ничего не работает для меня.

Вот Javascript код:

<script type="text/javascript"> 
    setInterval(function() { 
     $('#frame').load('chatitems.php'); 
    }, 1); 
    $(function() { 
     $(".submit_button").click(function() { 
      var textcontent = $("#content").val(); 
      var usercontent = $("#username").val(); 
      var namecontent = $("#nickname").val(); 
      var dataString = 'content=' + textcontent; 
      var userString = 'content=' + usercontent; 
      var nameString = 'content=' + namecontent; 

      if (textcontent == '') { 
       alert("Enter some text.."); 
       $("#content").focus(); 
      } else { 
       $("#flash").show(); 
       $("#flash").fadeIn(400).html('<span class="load">Loading..</span>'); 
       $.ajax({ 
        type: "POST", 
        url: "chatitems.php", 
        data: { 
         dataString, 
         userString, 
         nameString 
        }, 
        cache: true, 
        success: function(html) { 
         $("#show").after(html); 
         document.getElementById('content').value = ''; 
         $("#flash").hide(); 
         $("#frame").focus(); 
        } 
       }); 
      } 
      return false; 
     }); 
    }); 
</script> 

это моя форма:

<form action="" method="post" name="form"> 
    <input type="hidden" class="form-control" id="username" name="username" value="<?php echo $username; ?>" readOnly /> 
    <input type="hidden" class="form-control" id="nickname" name="nickname" value="<?php echo $nickname; ?>" readOnly /> 
    <input type="hidden" class="form-control" id="chat_role" name="chat_role" value="<?php echo $pm_chat; ?>" readOnly /> 
    <input type="hidden" class="form-control" id="team" name="team" value="<?php echo $manager; ?>'s Team" readOnly /> 
    <input type="hidden" class="form-control" id="avatar" name="avatar" value="<?php echo $avatar; ?>" readOnly /> 
    <div class="input-group"> 
     <input type="text" class="form-control" id="content" name="content" /> 
     <span class="input-group-btn"> 
      <input type="submit" name="submit" class="submit_button btn btn-primary" value="Post"></input> 
     </span> 
    </div> 
</form> 

и, наконец, это мой PHP код:

<?php 
include('db.php'); 
$check = mysql_query("SELECT * FROM chat order by date desc"); 
if(isset($_POST['content'])) 
{ 
    $content=mysql_real_escape_string($_POST['content']); 
    $nickname=mysql_real_escape_string($_POST['nickname']); 
    $username=mysql_real_escape_string($_POST['username']); 
    $ip=mysql_real_escape_string($_SERVER['REMOTE_ADDR']); 
    mysql_query("insert into chat(message,ip,username,nickname) values ('$content','$ip','$username','$nickname')"); 
} 

$req = mysql_query('select * from chat ORDER BY date desc'); 
while($dnn = mysql_fetch_array($req)) 
{ 
    ?> 
    <div class="showbox"> 
    <p><?php echo $dnn['username']; ?> (<?php echo $dnn['ip']; ?>): <?php echo $dnn['message']; ?></p> 
    </div> 
    <?php 
} 
?> 

Я знаю, что есть что-то неправильно с моим кодом, но провел несколько дней, но не помогло. Я надеюсь, что кто-то поможет.

UPDATE Форма успешно представлен с этим кодом только data: dataString, но когда я добавил nameString и userString то когда все не работает, как это должно быть. Я попытался испортить этот код, но ничего не получил.

Answer 1

Чтобы выяснить, что случилось с этим необходимо установить, что:

а) событие щелчка увольняет, который можно проверить, добавив console.log('something'); в верхней части этой функции.

б) Функция AJAX несколько работает правильно, что опять-таки можно проверить, добавив console.log() в успеха обратного вызова запроса AJAX. Вы также можете проверить консоль на наличие ошибок, например, если chatitems.php является 404'ing

с), что все данные, которые вы собираете из DOM var textcontent = $("#content").val(); содержит например, что вы ожидаете его. Опять console.log().

d) Это страница, которую мы вызывает успешно обрабатывают данные вы отправляете по горизонтали, так die()print_r() из $_POST значений для проверки данных, это принимающие в формате ваших ожидающий. Вам также необходимо добавить код ошибки в код mysql: https://secure.php.net/manual/en/function.mysql-error.php (или еще лучше использовать PDO или MySQLi https://secure.php.net/manual/en/book.pdo.php), в котором рассказывается, что что-то не так с вашим кодом MySQL. Вы можете проверить, что вы вызвали вызов AJAX (включая любые ошибки) на console.log(html) в своем обратном вызове.

Информация, собранная вами из вышеперечисленного, приведет вас к вашей ошибке.

Answer 2

Если я понимаю правильно, кажется, вы пытаетесь связать событие до того, как кнопка будет доступна. Попробуйте (в зависимости от версии используемого JQuery):

$(document).on('click, '.submit_button', function(){ 
    ... 
});