jquery ajax未将变量设置为POST答案

【问题标题】：jquery ajax not setting variable to POSTjquery ajax未将变量设置为POST
【发布时间】：2009-10-22 03:14:34
【问题描述】：

我被难住了。我正在使用 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 的新手 - 如果代码中的某些内容看起来很奇怪，我将不胜感激。走到这一步，经过了很多试验和错误。

【问题讨论】：

标签： jquery ajax forms post

【解决方案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()

【讨论】：

噢，我没听说过序列化。那工作得很好。谢谢！

【解决方案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);
});

【讨论】：

【解决方案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() 函数。

【讨论】：