Использование AJAX/JQuery для отправки данных формы в скрипт php

Question

Я собрал это вместе из других ответов на этом сайте и различных учебных пособий. Не уверен, почему он не работает, и мне не повезло с другими методами.

Вот часть моей страницы HTML:

<form id="newMovie" > 
     Title:<input type='text' id='title'/> 
     Genres:<input type='text' id='genres'/> 
     Cast:<input type='text' id='cast'/> 
     Director:<input type='text' id='director'/> 
     Metascore:<input type='text' id='metascore'/> 
     <input type="button" value="Send" id="theButton"/> 
    </form> 
    ... 
    <table> 
     <tr> 
      <td id="tr1td1"> 
       <p>..</p> 
      </td> 
      ... 

На «theButton» нажми, я хочу, чтобы захватить значение от входов в форме и отправить его в PHP скрипт, здесь мой AJAX:

<script> 
     $(document).ready(function(){ 
      $("#theButton").click(function(){ 

       var titleData = $('#title'); 
       alert(titleData); 

Я получил предупреждение здесь для отладки, это предупреждение, даже не поп, так что, похоже, терпит неудачу, прежде чем мы даже попасть сюда?

   var genresData = $('#genres'); 
       var castData = $('#cast'); 
       var directorData = $('#director'); 
       var metascoreData = $('#metascore'); 

       var dataIn = { 
        title : titleData.val(); 
        genres : genreData.val(); 
        cast : castData.val(); 
        director : directorData.val(); 
        metascore : metascoreData.val(); 
       } 
       var dataOut = $('#tr1td1'); 
       $.post("..../insert.php", dataIn, function(data, status) { 
        dataOut.html(data); 
       }); 
      }); 
     }); 
    </script> 

В PHP скрипт, я Виль попытаться захватить значения, как так:

$titleData=$_POST['title']; 
$genresData=$_POST['genres']; 
$castData=$_POST['cast']; 
$directorData=$_POST['director']; 
$metascoreData=$_POST['metascore']; 

Answer 1

Ваш комментарий указывает на ошибку:

Uncaught Syntax Error: unexpected ; at line 27, which is the first line in the "dataIn" brackets

Вы странствующих с запятой в вашем объекте строительства:

var dataIn = { 
    title : titleData.val(); 
    genres : genreData.val(); 
    cast : castData.val(); 
    director : directorData.val(); 
    metascore : metascoreData.val(); 
} 

Должно быть:

var dataIn = { 
    title : titleData.val(), 
    genres : genreData.val(), 
    cast : castData.val(), 
    director : directorData.val(), 
    metascore : metascoreData.val() 
}; 

литералы объектов являются список разделенных запятыми свойств как единой общей строки кода, а не отдельных строк кода.

Answer 2

свойства объекта Javascript разделяются запятыми , не точкой с запятой. Кроме того, другая версия в некоторых браузерах - не ограничивает окончательное свойство.

Answer 3

Ваш путь слишком длинный, вы упускаете имя = «» ATTRIB в тегах и

добавить имя = «» помечать вы можете сделать его более простым, как показано ниже

Во-первых изменить

<input type="button" value="Send" id="theButton"/> 

с

<button type="button" id="theButton" name="SubBtn" onclick="postsomething();">Send</button> 

После

<script type="text/javascript"> 
    function postsomething() { 
      $.ajax({ 
       type: 'POST', 
       url: '../insert.php', //your php file 
       data: $('#newMovie').serialize(), //here your form id 
       success: function (answer) { 
        $("#result").html(answer) //if you wanna return data from your php file 
       } 
      }) 
    } 
</script>