Колба с Аяксом - PullRequest
       2

Колба с Аяксом

0 голосов
/ 03 сентября 2018

Я действительно изо всех сил пытаюсь понять, что происходит с моим кодом. Цель состоит в том, чтобы взять 2 строки и отобразить расстояние редактирования. Запрос и ответ должны быть отправлены как объекты JSON

Вот мой файл index.html.

<html>
    <head>
        <meta charset="utf-8"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script>

            $(document).ready( function() {
                $('#mainForm').click(function() {
                   var formdata = $("#mainForm").serialize();
                   console.log(formdata);
                   $.ajax({
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({string1: $('#string1').val(), string2: $('#string2').val()}),
                        dataType: 'json',
                        url: '/index',
                        success: function (e) {
                            console.log(e);
                            window.location = "/index";
                        },
                        error: function(error) {
                        console.log(error);
                    }
                    });

                });
            });
        </script>
    </head>

    <body>
        <h1>Compute Edit Distance</h1>
        <form  action="/index" method='post' name="mainForm" id="mainForm"> 
            String1: <input type="text" name="string1" id="string1"> 
            </br>
            </br>

            String2: <input type="text" name="string2" id="string2">  
            </br>
            </br>
            <button name = "submit" id = "submit" name="submit">submit</button> 
        </br>
        </br>
        <span id="editDistance">{{edit_distance}}</span>
        </form>
    </body>
</html>

Теперь, когда я переключаю $ ('# mainForm'). Нажмите на $ ('# mainForm'). Submit, данные не передаются. Если я сохраню его как .click, мой контроллер получит данные в форме JSON правильно, но это не то поведение, которое мне нужно. Строки передаются только тогда, когда вы щелкаете внутри формы, и edit_distance не отображается. Если я включаю его при отправке, тип контента будет application / x-www-form-urlencoded, и я получаю ошибку сервера. Почему это происходит? Кроме того, как я могу динамически отображать расстояние редактирования при наборе текста в строках?

Когда я нажимаю кнопку отправки, для данных JSON запроса устанавливается значение Нет. Вот мой код сервера.

@app.route('/index', methods=['GET', 'POST'])
def index():

    edit_distance = 0

    if request.method == 'POST':
        print(request.content_type)
        data = request.get_json()
        string1 = data['string1']
        string2 = data['string2']
        print(string1, string2)
        edit_distance = get_edit_distance(string1, string2, len(string1),len(string2))
        print(edit_distance)



    response = make_response(render_template('index.html', edit_distance =     edit_distance))
    return response

1 Ответ

0 голосов
/ 07 сентября 2018

Тип содержимого является application / x-www-form-urlencoded, поскольку запрос на отправку все еще выполняется после выполнения ajax .onsubmit. Таким образом, вы увидите чередующиеся запросы в формате JSON и x-www-form-urlencoded. Для решения этой проблемы вы можете отменить поведение отправки по умолчанию:

//Prevent form submission from refreshing page
event.preventDefault();

Что касается того, как динамически обновлять его, вы можете в случае успеха установить innerHTML желаемого div следующим образом:

document.getElementById("divId").innerHTML = "desired value";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...