jquery ajaxが変数をPOSTに設定していない

Question

困惑しています。フォームからデータベースにいくつかのフィールドをPOSTするために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>

次は、これをページにPOSTするために使用しているコードです。

$("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

テキスト入力とテキストエリアには、attr（ 'value'）の代わりにval（）メソッドを使用します。 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">

より多くの＆quot; jquery way＆quot;次のとおりです。

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

with：

$(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（）関数を調べることもできます。