提交表单时 url 不应更改答案

【问题标题】：url should not change on submitting a form提交表单时 url 不应更改
【发布时间】：2012-10-05 11:13:34
【问题描述】：

我有这个 Django 应用程序，当用户请求“localhost:8000/time/”时，它会显示 html 表单 input.html。

<head>

<!-- paste this in your footer -->
<script type="text/javascript"> 
$(document).ready(function() {
        $('#myForm').submit(function() { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(),
                type: $(this).attr('POST'), // "post"
                url: $(this).attr('/poi/'), //  "/poi/"
                success: function(response) { 
                    // do something here
                }
            });
        return false;
    });
});
</script>
<!-- add jquery or it won't work -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>

<body>
        <form action="/poi/" method = "post">

        <!---------
        first name :<input type ="text" name ="fname">
        last name:<input type ="text" name ="lname">
        ------>

        enter a days :<input type ="text" name ="days">
        <br>
        <input type=submit name="submit" onclick="submit_function(); return false;">
        </form>

</body>

当提交表单时，用户看到 response.html 页面并且 URL 更改为“localhost:8000/poi/ 显示有

urls.py

urlpatterns = patterns('',
                            (r'^hello/$', hello),   
                            ('^time/$', current_datetime),
                            ('^poi/$', next_datetime),

                        )

views.py

def current_datetime(request):  
    return render_to_response('input.html')


def next_datetime(request):

    now = datetime.datetime.now()
    now_day = now.day
    now_month = now.month
    now_year = now.year

    return render_to_response('response.html', {'now_day': now_day, 'now_month'}}

现在我必须做同样的事情，但网址不应从“localhost:8000/time/”更改为“localhost:8000/poi/” 但它应该是“localhost:8000/time/

如何做到这一点？

【问题讨论】：

标签： django

【解决方案1】：

你必须使用 ajax 来完成这个使用 jquery，它看起来像

<form id="myForm"> ... </form> <!-- add an id to your form -->

<!-- paste this in your footer -->
<script type="text/javascript"> 
$(document).ready(function() {
        $('#myForm').submit(function() { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(),
                type: $(this).attr('method'), // "post"
                url: $(this).attr('action'), //  "/poi/"
                success: function(response) { 
                    // do something here
                }
            });
        return false;
    });
});
</script>
<!-- add jquery or it won't work -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

它应该开箱即用

这是一个匿名函数，但你可以将代码放在一个命名函数中，然后将其添加到按钮中：

<input type="submit" onclick="submit_function(); return false;" />

基本一样

【讨论】：

我是 javascript/ajax 的新手，您能否解释更多。我必须做哪些改变以及在哪些文件中/
我编辑了我的帖子，添加了更多信息，以便您理解 :)
attr('method') 中的方法和attr('action') 中的动作应该是什么？
您可以将它们硬编码为“POST”（或“GET”）和您的操作（“/poi/”），但 $(this).attr(...) 意味着：采取“this " 对象（如果一切按预期进行，则为“myForm”）并获取其属性 (.attr())，其名称是括号内的字符串 (.attr("action")、.attr("method") 和等等...）
在 input.html 中，我将此代码放在之外，并在 attr('/poi/') 中设置了 attr('POST') 和操作。 $('#myForm').submit(function()) 中的 myForm 应该是什么