jquery ajax не устанавливает переменную в POST

Question

Я в тупике. Я использую jquery и ajax для размещения некоторых полей из формы в базу данных.

Это для «формы редактирования» - поэтому все поля предварительно заполнены данными, существующими в базе данных mysql. Я передаю ввод из 4 полей, и он работает только для 2 из них. Вот HTML

<form id="editSubmit" method="post" name="editSubmit" action="" enctype="multipart/form-data">
                    <input type="hidden" id="newsID" name="newsID" value="<?=$newsID;?>">
                    <input type="hidden" id="authorID" name="authorID" value="<?=$news['editorID'];?>">
                    <label for="postTitle">Title</label><br />
                    <input type="text" name="postTitle" id="postTitle" class="text" size="20" value="<?=$postTitle;?>"/><br />
                    <label for="postText">Post Text</label><br />
                    <textarea name="postText" id="postText" class="textarea"><?=$postText;?></textarea>                 <br /><br />
                    <button type="submit">Submit Edit </button>
                    <input type="button" onClick="closeEdit()" value="Cancel">
</form>

Теперь вот код, который я использую, чтобы разместить это на странице.

$("form#editSubmit").submit(function() {

// we want to store the values from the form input box, then send via ajax below
var newsID     = $('#newsID').attr('value');
var postTitle     = $('#postTitle').attr('value');
var postText   = $('#postText').attr('value'); 
postText = postText.replace(/&/g,'%26');
var authorID  = $('#authorID').attr('value'); 

$.ajax({
        type: "POST",
        url: "news/editNews.php",
        data: "newsID="+ newsID + "&postTitle="+ postTitle + "&postText=" + postText + "&authorID=" + authorID,
        success: function(){
            $('form#editSubmit').fadeOut('slow');
            $('div.success').fadeIn();
            }
    }); // End .ajax function
return false;
}); //End submit function()

Этот код успешно отправляет через authorID и newsID, но не повезло с postTitle или postText. Я не вижу, что я делаю не так. Может я что-то упустил?

Кроме того, я совершенно новичок в ajax / jquery - поэтому я буду признателен за любые советы, если что-то выглядит странно в коде. Это было много проб и ошибок, чтобы получить это далеко.

Answer 1

Для ввода текста и текстовой области вы хотите использовать метод val () вместо attr ('value'). Использование attr ('value') правильно для скрытых входных данных. Более того, просто используйте $ (this) .serialize () в качестве параметра данных.

$("form#editSubmit").submit(function() {

    var $form = $(this);
    $.ajax({
                type: "POST",
                url: "news/editNews.php",
                data: $form.serialize(),
                success: function(){
                        $('form#editSubmit').fadeOut('slow');
                        $('div.success').fadeIn();
                        }
    }); // End .ajax function
    return false;
}); //End submit function()

Answer 2

Сделайте это:

$.ajax({
  type: "POST",
  url: "news/editNews.php",
  data: {
    newsID: newsID,
    postTitle: postTitle,
    postText: postText,
    authorID: authorID
  },
  success: function() {
    $('form#editSubmit').fadeOut('slow');
    $('div.success').fadeIn();
  }
});

Пусть jQuery проделает тяжелую работу в отношении побега и так далее. Передача анонимного объекта в поле data является предпочтительным подходом.

Также сделайте это:

$("...").val();

вместо:

$("...").attr("value");

И наконец вместо:

<input type="button" onClick="closeEdit()" value="Cancel">

Более "путь jquery":

<input type="button" id="cancel" value="Cancel">

с:

$(function() {
  $("#cancel").click(closeEdit);
});

Answer 3

Вам не нужно использовать $('form#editSubmit') - $('#editSubmit') отлично подойдет. Вы можете получить значения из ваших полей, используя функцию val():

var newsID     = $('#newsID').val();
var postTitle     = $('#postTitle').val();
var postText   = $('#postText').val();

Еще одна вещь, которую я заметил, это то, что ваш dataType не определен. Если вы отправляете это как объект JSON, вам лучше будет указать dataType, contentType и представить ваши фактические данные в виде отдельных свойств объекта:

$.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                url: "news/editNews.php",
                data: "{'newsID':" newsID + ",'postTitle':'"+ postTitle + "','postText':'" + postText + "','authorID':" + authorID + "}",
                success: function(){
                        $('form#editSubmit').fadeOut('slow');
                        $('div.success').fadeIn();
                        }
        });

Вы также можете ознакомиться с функциями serialize() или serializeArray().