Question

我正在使用Jquery向我的服务器发送ajax请求。但我的代码并没有感觉到按钮点击。我的代码似乎很好。我不知道自己哪里出错了。我正在使用Django模板引擎。我在脚本块中包含了jquery 脚本。为了检查我的按钮点击是否被感知，我在按钮点击事件处理程序中使用了警报。但我没有得到警告信息。

我的代码：

{% extends 'base.html' %}

{% block script %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
{% endblock script %}

{% block content %}
    <div class="row" style="padding-left: 2%;padding-top:1%;">
        <div class="col-md-9">
            <h2>BookMyHotel</h2>
        </div>

        {% if name %}
            <div class="col-md-3">
                <a href="{% url 'admin' %}" > {{ name }}</a> |
                <a href="{% url 'office_logout' %}" class="btn btn-primary" >Log out</a><br/><br/>
            </div>
        {% endif %}

    </div>
    <div class="container" style="margin-left: 4%">
        <form  class="form-group" name="form1" id="form1" method="post" style="padding-top: 1%" action = "{% url 'update_employee' %}">
            {% csrf_token %}
            <h3>Update employee</h3>
            {% if message %}
                <b id="message" style="color: red">{{ message }}</b>
            {% endif %}
            <br/>
            <div class="form-group row">
                <label class="control-label col-sm-2">Hotel id</label>
                <label id="hotel_id" class="control-label">bmh-{{ hotel_id }}</label>
            </div>
            <div class="form-group row">
                <label class="control-label col-sm-2">Hotel name</label>
                <label id="hotel_name" class="control-label">{{ hotel_name }}</label>
            </div>
            <div class="form-group row">
                <label class="control-label col-sm-2">Employee ID</label>
                <input class="form-control col-sm-2" type="text" id="employee_id" name = "employee_id" placeholder = "Employee ID" required="true" >
                <input type = "button" id="check" value = "Check" class="btn btn-primary">

            </div>

            <div class="form-group row">
                <label class="control-label col-sm-2">Designation</label>
                <input class="form-control col-sm-2" type="text" id="designation" name = "designation" placeholder = "Designation" required="true" >
            </div>
            <div class="form-group row">
                <label class="control-label col-sm-2">Experience</label>
                <input class="form-control col-sm-2" type="text" id="experience" name = "experience" placeholder = "Experience" required="true" >
            </div>
            <input type = "submit" value = "Create" class="btn btn-primary">
        </form>

    </div>


    <script>
        $(document).ready(function() {
            $('#check').on('click', function () {
                    alert('hi');
                    var id = $('#employee_id').val();
                    alert(id);
                    var data = {'employee_id': id};
                    $.ajax({

                        url: {% url 'update_employee' %},
                        contentType: "application/json",
                        dataType: "json",
                        data: data,
                        success: function (data) {
                           if(data.msg == 'success'){
                                $('#update_sec').show();


                                $('#designation').val(data.designation);
                                $('#experience').val(data.experience);


                           }
                           else{

                               $('#message').text("Employee does not exist.");
                           }
                        }

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

{% endblock content %}

Answer 1

您也可以使用“onclick”。

<input type = "button" id="check" value = "Check" class="btn btn-primary" onclick="myfunction()">

和

<script>
        function myfunction() {
                    alert('hi');
                    var id = $('#employee_id').val();
                    alert(id);
                    var data = {'employee_id': id};
                    $.ajax({

                        url: {% url 'update_employee' %},
                        contentType: "application/json",
                        dataType: "json",
                        data: data,
                        success: function (data) {
                           if(data.msg == 'success'){
                                $('#update_sec').show();


                                $('#designation').val(data.designation);
                                $('#experience').val(data.experience);


                           }
                           else{

                               $('#message').text("Employee does not exist.");
                           }
                        }

                    });
                }
    </script>

Jquery没有按下按钮

1 个答案: