jQuery通过div中的表单提交加载div中的内容
我正在研究消息传递系统。 我已经完成了收件箱和消息查看部分。 它们被加载到用户帐户页面上的div中，并且无需刷新页面。
我在这篇文章中以jquery为基础。
在这里获得了一些帮助，以获取消息链接以在div中打开消息而不刷新页面，以及如何添加filter以允许配置文件链接实际刷新并转到实际的配置文件页面。 这一切都很好。
我转到消息发送方，它使用模态（twitter bootstrap）来加载外部表单。 这也有效，但我现在花了很多时间试图找出如何做与链接相同的事情，使用表单提交即将其提交并刷新整个页面。 同样，我使用与收件箱部分相同的jQuery。
这是收件箱代码：
使用Javascript：
$.ajaxSetup({ cache: false}); $(document).ready(function(){ // set up the click event $('a.loader').live('click', function() { var toLoad = 'user/messaging/'; $('.messages').fadeOut(100, loadContent); $('#load').remove(); $('#waiting').append('<div id="load" style="height: 700px; background:url(files/recordCovers/index.html?); background-size: cover;">
'); $('#load').fadeOut(1000); function loadContent() { $('.messages').load(toLoad, '', function(response, status, xhr) { if (status == 'error') { var msg = "Sorry but there was an error: "; $(".messages").html(msg + xhr.status + " " + xhr.statusText); } }).fadeIn(4000, hideLoader()); } function hideLoader() { $('#load').fadeOut(2000); } return false; }); }); $(".messages").on("click", "a:not(.profile)", function (e) { $(".messages").load($(this).attr("href")); e.preventDefault(); });
如果你想保持一个正常的forms，只是捕获提交事件，那么你可以这样做：
http://jsfiddle.net/ufomammut66/uPvYx/2/
基本上在提交该表单时，我们将运行一个函数而不是立即提交。 我们发送ajax调用（提交表单数据），然后return false 。 返回false将阻止页面提交表单（此时它将再次提交它，因为我们刚刚使用ajax提交它）。 因此，您可以执行所有逻辑，ajax调用，任何其他检查/处理，然后返回false以停止提交。
我在那里添加了一些，以防你想要一些错误恢复或使用ajax提交的条件。 如果您返回true而不是false，则页面将继续提交表单并重定向到该页面。 因此，如果你有一个禁用ajax提交的模式，你可以在这里使用它。 我在那里放了一个无意义的支票作为概念certificate。 您可以使用该检查来查看它是否有效。
我猜这会对你有所帮助：
function submit() { $.ajax({ type:'POST', url: "your url to submit", data: ({param_1:somevar}), dataType:"json", beforeSend: function(){ //do something here } success: function(return){ //do something here } }); }
并且不要提交任何提交按钮。 您可以使用以下命令调用提交函数：
$('#button').click(function(){ submit(somevalue); });