Кнопка Jquery ajax не отправит

Question

Не могу понять, почему моя кнопка не работает, что для ответа ajax. Попытка заставить его напечатать имя одного из людей из формы после нажатия кнопки id AJAX. Есть ли что-то, что я пропускаю, потому что независимо от того, что я помещаю в часть успеха, ничего не происходит.

     <div class="formContainer" id="container">
        <form class="form-horizontail form" role="form"
              action="/process-form" method="post">
            <input type="hidden" name="csrf" value="{{csrf}}">

            <div class ="form-group">
                <label for="fieldName" class="col-sm-2 control-label" >Name</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="fieldName" name="name1">

                    </div>
                </div>

                <div class ="form-group">
                    <label for="fieldName" class="col-sm-2 control-label" >phone number</label>
                    <div class="col-sm-4">
                        <input type="tel" class="form-control" id="fieldPhone" name="phoneNumber1">
                    </div>
                </div>
                <div class ="form-group">
                    <div class="col-sm-offset-2 col-sm-4">
                        <button type="submit" class=" btn btn-default" id = "list">List</button>
                    </div>
                </div>
            </form>
        </div>

        <button type="button" id="AJAX-Button"> Draw</button>
       {{#section 'jquery'}}
  </script>
<script>
function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max)) +1;
}
$(document).ready(function () {
    $("#AJAX-Button").on('click', function (event) {
        //event.preventDefault();
        var winner = "name" + getRandomInt(3);
        var formData = { 'name': $('input[name= \\winner]').val() };
        var jsonData = JSON.stringify(formData);
        console.log(formData);
        console.log(jsonData);
        console.log(winner);
        var $container = $('#container');
        $.ajax({
            url: "/process-form",
            type: 'POST',
            data: jsonData,
            success: function (data) {
                alert(winner);
            },
            error: function () {
                alert("failed");
            }
        });
    });
});

РЕДАКТИРОВАНИЕ: исправил код благодаря

Answer 1

Похоже, ошибка в том, что вы не разделяете две инструкции <script>. Используйте один для <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>, а затем откройте новый для своего кода <script></script>, например:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
    //code goes here
</script>

Примечание: Если вы используете HTML5, вам не нужно указать type="text/javascript" в теге скрипта. См. Этот ответ для получения дополнительной информации: Необходим ли атрибут типа внутри тега сценария .

Answer 2

Поместите javascript код вне ссылки cdn. Как это

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
        $(document).ready(function () {
            $("#AJAX-Button").on('click', function (event) {
                event.preventDefault();
                var formData = {
                    'name': $('input[name=name1]').val()
                };
                console.log(formData);
                var $container = $('#container');
                $.ajax({
                    url: "/processAJAX",
                    type: 'POST',
                    data: formData,
                    success: function (data) {                      
                            alert(data);
                    },
                    error: function () {                  
                        alert("failed");
                    }
                });
        });
        });
    </script>