提交表单而不重新加载页面

时间:2015-05-28 14:51:23

标签: jquery html ajax

编辑:我看到AJAX就是答案。我仍然想知道是否有一种比重新编程系统更简单的方法。代码是服务器端,只捕获两个参数,月份和年份。下面是在页面加载时获取这些参数的服务器端代码。我们还在考虑是否需要完整的AJAX重写?

      ' Set the Month and Year
      nMonth = Request.QueryString("nMonth")
      nYear = Request.QueryString("nYear")
      if nMonth = "" then nMonth = Month(dtDate)
      if nYear = "" then nYear = Year(dtDate)

      ' Set the date to the first of the current month
      dtDate = DateSerial(nYear, nMonth, 1)

      If strFilter = "" OR strFilter = "0" Then 
          newFilter = "0"
      Else 
          newFilter = strFilter
      End If 



      Set dbConn = GetDataConnection
      strSQL = "GetSchedule " & nMonth & ", " & nYear & ", " & nSite & ", '" & SQLSafe(newFilter) & "' "
      'Response.Write(strSQL)
      'Response.End
      Set rs = dbConn.Execute (strSQL)
      %>


      <form method="get" name="DateSelect" action="<%=curPageName()%>">

我需要一些帮助,不要在盒子外面思考,也可以在盒子里面思考。我可能会忽略一些非常简单的东西,但我还是需要帮助。我的主页上有日历设置。它具有内置功能,可用于前几个月和未来几个月。现在,它可以重新加载页面以显示上一个/下个月。无需重新编程我没有创建的整个系统,有没有办法访问上个月和下个月而无需使用URL中的参数重新加载页面?

以下是链接到上个月和下个月的代码:

<form method="get" name="DateSelect" action="index.asp">
    <table width=85%>
        <tr>
            <td align=center><a class="leftArrow navigation" href="index.asp?nMonth=4&nYear=2015">&lt; </a>
                <span id="calendarDay">May &nbsp;2015</span>
                <a class="rightArrow navigation" href="index.asp?nMonth=6&nYear=2015"> &gt;</a>
            </td>
        </tr>
    </table>
</form>

4 个答案:

答案 0 :(得分:1)

您可以使用AJAX执行对服务器的请求/响应,而无需重新加载页面。这些请求/响应通常与JSON数据进行通信。

至于你不得不重新编程整个系统&#34;,实现AJAX不是一个简单的插件,需要你对代码进行一些修改。

您可以查看jQueryjQuery Form Plugin之类的内容,以便更轻松地进行AJAX通信。

答案 1 :(得分:1)

回答您更直接的问题,我将在此总结:

  

无需重新编程我没有创建的整个系统,   有没有办法访问上个月和下个月而无需重新加载   带有参数的页面?

没有。如果使用像PHP这样的服务器端语言来完成月/日生成,那么就没有非常简单的方法可以将其重组为异步。

我能想到的最简单的转换方法是使用日期生成代码,并将其放在一个更简单的容器中,以AJAX请求作为HTML返回,然后替换页面上的HTML。请记住,这可能会重置任何事件侦听器,如按钮。但是,我预先告诉你,即使这种方法可能涉及修复现有代码的一些细节部分。

答案 2 :(得分:1)

你可以使用JQuery $ .ajax,如果没有,你可以构建自己的实现:

&#13;
&#13;
<script type="text/javascript">
    function callasync(url, id_contenedor) {
        var ajax = false;

        if (window.XMLHttpRequest) {
            //Mozilla, Safari, etc 
            ajax = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            //IE       
            try {
                ajax = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e) {
                //Versión antigua    
                try {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                }
            }
        }
        else
            return false;

        if (id_contenedor != '') {
            document.getElementById(id_contenedor).innerHTML = "<table width='100%' height='100%'><tr><td style='text-align: center; vertical-align: center;'><a class='LabelInfo'>Whait...</a><br /><img src='Imagenes/Esperar.gif' /></td></tr></table>";
        }

        ajax.onreadystatechange = function () {
            pageload(ajax, id_contenedor);
        }

        ajax.open('GET', url, true);
        ajax.send(null);
    }

    function pageload(ajax, id_contenedor) {
        if (ajax.readyState == 4 && (ajax.status == 200 || window.location.href.indexOf("http") == -1))
            if (id_contenedor != '') {
                document.getElementById(id_contenedor).innerHTML = ajax.responseText;
            }
    }
</script>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

如果您在提交表单后不想重新加载页面,那么您应该使用Ajax提交表单

为此你应该使用Ajax form plugin

检查此示例

    <form id="myForm" action="comment.php" method="post"> 
            Name: <input type="text" name="name" /> 
            Comment: <textarea name="comment"></textarea> 
            <input type="submit" value="Submit Comment" />  
    </form>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script>