Question

我整天都在为此而奋斗。似乎没有什么工作。这就是我的情况。

我有一个包含两个字段的Django表单：redirect_from，redirect_to。此表单有两个提交按钮：Validate和Save。加载页面时，隐藏Submit，仅显示Validate。

现在，当用户填写两个字段并单击Validate时，我使用Ajax确认两个字段是相同的。如果是，请显示Save按钮。单击Save按钮应将表单保存到数据库。我还放入一个oninput监听器，以便在进行Ajax调用之后，如果用户尝试更改数据，则再次隐藏Save按钮，他现在必须再次对其进行评估。

显然，使用Ajax应该很容易，但我发现它非常困难和令人沮丧。到目前为止，这是我的代码：

我的模板：

form method="post">
        {% csrf_token %}
        {% include 'partials/form_field.html' with field=form.redirect_from %}
        {% include 'partials/form_field.html' with field=form.redirect_to %}
        <button id="submit" class="btn btn-lg btn-primary" type="submit" name="save" value="Save">Save</button>
        <button id="ajax_submit" class="btn btn-lg btn-primary" type="submit" name="ajax" value="Ajax">Validate</button>
    </form>


{% endblock %}


{% block extra_scripts %}
{{ block.super }}

<script type="text/javascript">

    $(document).ready(function() {
        $("#submit").hide()
    });

    $('#id_redirect_to').on('input', function(){
        $("#submit").hide()
    });


    console.log("hello")
    //For getting CSRF token
            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);


                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                   }
                }
             }
        return cookieValue;
  }


    //For doing AJAX post

    //When submit is click
     $("#ajax_submit").click(function(e) {
         console.log("Clicked")


     e.preventDefault();

    //Prepare csrf token
     var csrftoken = getCookie('csrftoken');


    //Collect data from fields
     /*var email = $('#inputEmail').val();*/
     var redirect_from= $('#id_redirect_from').val();
     var redirect_to= $('#id_redirect_to').val();
     console.log("URL from and to is", redirect_from, redirect_to)
     /*var password = $('#inputPassword').val();*/


    //Send data
     $.ajax({
           url : window.location.href, // the endpoint,commonly same url
           type : "POST", // http method
           data : { csrfmiddlewaretoken : csrftoken,
           redirect_from : redirect_from,
           redirect_to : redirect_to
           /*password : password*/
     }, // data sent with the post request

     // handle a successful response
     success : function(json) {
     console.log(json); // another sanity check
     //On success show the data posted to server as a message
         if (json['redirect_success'] === 'true')
         {
             alert("They are the same!" +json['redirect_success'] +'!.' );
             $("#submit").show()
         }
         else
         {
             $("#submit").hide() //Maybe display some error message in the future!
         }
     },

     // handle a non-successful response
     error : function(xhr,errmsg,err) {
     console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
     }
     });
    });


</script>

{% endblock extra_scripts %}

我的观点：

def edit_redirect(request, pk):
    if request.method == 'GET':
        red_url = MarketingRedirect.objects.get(pk=pk)
        data = {'redirect_from': red_url.redirect_from, 'redirect_to': red_url.redirect_to}
        form = RedirectEditForm(initial=data)
        return render (request, 'marketing_redirect/edit_redirect.html', {'form': form,
                                                                                       'redirect_from':  red_url.redirect_from})

    if request.POST['save'] == 'Save':
        form = RedirectEditForm(request.POST)
        if form.is_valid():
            red_url = MarketingRedirect.objects.get(pk=pk)
            data = form.cleaned_data
            red_url.redirect_from = data['redirect_from']
            red_url.redirect_to = data['redirect_to']
            red_url.save()
            return redirect('backend_redirect')

    if request.POST['ajax'] == 'Ajax':
        if request.is_ajax():
            redirect_from = request.POST.get('redirect_from')
            redirect_to = request.POST.get('redirect_to')
            if redirect_from == redirect_to:
                data = {'redirect_success': 'true'}
                return JsonResponse(data)
            else:
                data = {'redirect_success': 'false'}
                return JsonResponse(data)

我得到500: MultiValueDictKeyError at "'Save'"

有人可以指引我朝这个方向前进吗？非常新的ajax。

Answer 1

这是因为使用按钮单击事件而不是表单提交来执行Ajax调用。 Ajax没有发送按钮名称属性。您需要手动将按钮'name'参数添加到通过Ajax发送的数据中，如下所示：

data : { csrfmiddlewaretoken : csrftoken,
       redirect_from : redirect_from,
       redirect_to : redirect_to,
       action: 'ajax' 
}

在您的视图中使用它来捕获是否已收到Ajax请求：

if request.POST.get('action') == 'ajax':
    # do ajax stuff here

同样作为良好的做法，我会使用'更安全'的命名约定，以避免混淆。就像可能将'ajax'改为'验证'等...

我忘了提到你需要删除type="submit" 来自Ajax按钮。

希望这会有所帮助：）

如何在同一页面上从Django和Ajax获取多个帖子请求？

1 个答案: