在提交表单后如何使用jQuery或Ajax交换背景图像？

我有一个使用背景图像的标准html表单。 在用户点击提交按钮后，我想用确认图像替换整个表单，但是我对jQuery或Ajax不够精明。

你可以在左上方看到表格。

这是html：

 
 
        Private Commercial   
 
  

这是css：

 #freeQuote { width: 231px; height: 267px; background-image: url(../_images/free-quote.png); } #freeQuote form { padding-top: 70px; } #freeQuote input { border: 1px solid #666; margin-left: 20px; width: 200px; } #freeQuote select { width: 200px;margin: 5px 0 10px 22px; } input#quoteSubmit { width: 208ox; border: none; } 

我想用这张图片替换整个表格：_images / free-quote-confirm.png

任何帮助整理这个将非常感谢并立即得到承认。 谢谢！

Answer 1

你可以这样做：

 $('#freeQuote form').submit(function(e){ //Set the data ready for ajax post var formdata = $(this).serialize(); $.post("/system/qoute/path.php",formdata,function(data){ if(data.error) { alert('Error: ' + data.error); return; } }); //The Image var Image = $('').attr({src:'_images/free-quote-confirm.png', width:100, height:100, alt:"Success"}); //Remove the form $('#freeQuote form').remove() //Add the image inside the div $('#freeQuote').append(Image); //Return false so the form does not send as normal. you can also use e.PreventDefault(): return false; }); 

然后在服务器端，您将通常使用POST值处理数据./

注意：我刚刚向您展示的示例返回了一个json字符串，因此如果您需要一个小错误检查系统，则必须进行json编码。