Ответ, полученный при вызове AJAX, отображается на другой странице HTML - PullRequest
Новая
       1

Ответ, полученный при вызове AJAX, отображается на другой странице HTML

0 голосов
/ 19 февраля 2020

У меня есть ajax запрос вызова, который отправляет ID на сервер, затем сервер отправляет ответ JSON. Я хочу обновить внутренний HTML предварительного тега, используя значение в этом JSON Ответе.

Форма HTML

<form id="AssociateForm" class="form form-inline" style="float:right" action="{% url 'Project:MyView' TR.id %}" method="POST" target="_blank">
    <div class="form-group">
        <input type="text" name="JIRA_ID" style="width:150px" placeholder="ID" class="form-control has-success" id="{{TR.id}}">
        <button name="button" type="submit" id='Submit_{{TR.id}}' class="btn btn-primary">Associate</button>
    </div>
</form>

AJAX

<script>
    $("#AssociateForm").submit(function(e) {
        e.preventDefault(); 

        var form = $(this);
        var url = form.attr('action');

        var local_id = $('input[name=J_ID]').attr('id'); 

        var formData = {
            'J_ID' : $('input[name=J_ID]').val()
        };
        console.log(formData)

        $.ajax({
            url: url,
            data: formData,
            dataType: 'json',

            success: function (datas) {
                var data = JSON.parse(datas);
                if(datas.status){
                    alert(datas);
                   //$('#Failure_'+local_id).innerHTML = data.category + ' issue: '+data.j_id +' ('+data.j_status+')'
                }
            },
            error: function(jqXHR, textStatus){
                alert("In error")
            }
        })
        .done(function(data){
            alert(data)
        });
    });
</script>

по какой-то причине приведенный выше код также не печатает журнал консоли.

Но,

Когда приходит ответ секция успеха не запускается. Вместо этого полная строка JSON печатается на другой странице.

JSON Ответ

{"category": "known", "j_id": "AU298", "j_status": "Confirmed"}

ниже от View -Page-source 

<code><html>
   <head></head>
   <body data-gr-c-s-loaded="true">
     <pre style="word-wrap: break-word; white-space: pre-wrap;">

        {"category": "known", "j_id": "AU298", "j_status": "Confirmed"}

Ответы [ 4 ]

0 голосов
/ 19 февраля 2020

Это сработало для меня, я полностью удалил форму.

Код вместо формы 

 <div class="form-group AssociateForm" style="float:right">
    <input type="text" name="J_ID" style="width:150px;float:left" class="form-control has-success">
    <button name="button" type="submit" id="{{TR.id}}" class="Associater btn btn-primary">Associate</button>
</div>

AJAX 

<script>
      $('.Associater').on('click', function () {
        var local_id = $(this).attr('id');
        var j_id = $(this).closest("div.AssociateForm").find('input[name=J_ID]').val();

        if (j_id === "") {
            alert("JID cannot be empty")
            return false
        }
        var url = "{% url 'Project:View' 0 %}".replace('0', local_id);

        var formData = {
            'J_ID' : j_id,
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        };        
        console.log(local_id);
        console.log(j_id);
        console.log(url);
        console.log(formData);
        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    ele = 'Failure_'+local_id;
                    document.getElementById(ele).innerHTML = data.category + ' issue: '+data.j_id +' ('+data.j_status+')';
                }
            },
            error: function (jqXHR, textStatus ) {
                alert("For some reason im here");
            }
        });

    });
</script>
0 голосов
/ 19 февраля 2020

попробуйте использовать кеш false 

cache: false,
0 голосов
/ 19 февраля 2020 
success: function (datas) {
            if (datas.status) {
                alert(datas);
                $('pre#<ID>').html(datas.category + ' issue: ' + datas.j_id + ' (' + datas.j_status + ')');
            }
        }
0 голосов
/ 19 февраля 2020

Возможно, это связано с тем, что вы отправляете форму, и после ее отправки откроется новая вкладка по мере отправки формы. Чтобы решить эту проблему, вы можете использовать следующий код: 

<form action="..." method="POST" target="_blank">
<input type="submit" id="btn-form-submit"/>
</form>
<script>
 $('#btn-submit').click( function(){ $('#btn-form-submit').click(); } );
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...