2009-10-22 74 views
0

我很难过。我使用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的全新手 - 所以如果代码中有些奇怪的东西,我会很感激任何提示。得到这一点已经有很多尝试和错误。

回答

2

为了您的文字输入和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() 
+0

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

1

这样做:

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

你不”需要使用$('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()功能。