jquery ajax没有设置变量为POST

问题描述：

我很难过。我使用jquery和ajax从表单向数据库发布一些字段。jquery ajax没有设置变量为POST

这是一个“编辑表单” - 所有的字段都预填充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的全新手 - 所以如果代码中有些奇怪的东西，我会很感激任何提示。得到这一点已经有很多尝试和错误。

答

为了您的文字输入和textarea的，你要使用的VAL（）方法，而不是ATTR（ '值'）。使用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()

Ooo，我还没有听说过序列化。这工作完美。谢谢！ – Andelas 2009-10-22 03:43:23

答

这样做：

$.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");

最后代替：

更多的 “jQuery的方式” 是：

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

有：

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

答

你不”需要使用$('form#editSubmit') - $('#editSubmit')会做得很好。您可以使用val()功能与你的域检索值：

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

我注意到的另一件事是，你的数据类型是没有定义。如果你发送此作为一个JSON对象，你最好提供具体的数据类型，则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()功能。

jquery ajax没有设置变量为POST

相关推荐