JQuery中的Ajax未执行

时间:2018-11-09 22:13:33

标签: javascript jquery ajax

我想对后端Flask发出两个发布请求。我昨天成功获得了登录请求,因为我可以在浏览器控制台中看到打印的信息。但是在添加第二个单击事件后,两者均失败。 而“登录”帖子和“搜索”帖子请求失败的方式有所不同,因为对于第一个,我可以在控制台中看到“单击”,但是对于第二个则什么也没有。

我也使用了request.get_data()和request.get_json(),但是一无所获。我已经使用了一种更简单的方法来从Flask获取帖子请求,例如request.form。但是,我仍然很困惑代码有什么问题。

感谢您提供帮助!

下面是.js文件

$(document).ready(function () {

// login, for sending the email and password
$(function () {
    $("form#formLogin").on('click','button#buttonLogin', function () {
        console.log('clicked');
        $.ajax({
            url: "http://127.0.0.1:5000",
            type: "POST",
            data: $('form#formLogin').serialize(),
            contentType: 'json; charset=UTF-8',
            cache: false,
            success: function (response) {
                console.log(response.d);
                console.log("login info sent");
            },
            fail: function (response) {
                console.log(response.d);
                console.log("failed");
            }
        })
    });
})


// search, for executing sql
$(function () {
    $('form#formSearch').on('click', 'button#buttonSearch', function () {
        console.log('begin sending select');

        $.ajax({
            url: "http://127.0.0.1:5000",
            type: "POST",
            data: $('form#formSelect').serialize(),
            contentType: 'json; charset=UTF-8',
            cache: false,
            success: function (response) {
                console.log(response.d);
                console.log("search info sent");
            },
            fail: function (response) {
                console.log(response.d);
                console.log("failed");
            }
        })
    });
})
})

下面是.html,登录部分

<form id="formLogin" class="formLogin" method="post">
<h1 class="h3 mb-3 font-weight-normal">Please Login</h1>
<input type="hidden" name="post" class="form-control" value="login"/>

<label for="inputEmail" class="sr-only">Email:</label>
<input type="email" id="inputEmail" name="userEmail" class="form-control" placeholder="Email address" required autofocus/>

<label for="inputPassword" class="sr-only">Password:</label>
<input type="password" id="inputPassword" name="userPwd" class="form-control" placeholder="Password" required/>

<label for="buttonLogin" class="sr-only">Login:</label>
<button id="buttonLogin" class="btn btn-lg btn-primary btn-block" value="login">login</button>

</form>

下面是.html,搜索部分

<form id="formSearch" method="post">
<input type="hidden" name="post" class="form-control" value="select"/>

<div class="input-group mb-3 mt-4">

    <label for="selectRecord" class="sr-only">SelectRecord:</label>
    <input type="text" id="selectRecord" name="selectRecord" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1"  required autofocus/>

    <div class="input-group-prepend">
        <label for="buttonSearch" class="sr-only">Search:</label>
        <button id="buttonSearch" name="buttonSearch" class="btn btn-outline-secondary search" value="search">Search</button>
    </div>

</div>

<label for="checkBoxRegion" class="sr-only">Region:</label>
<input id="checkBoxRegion" name="checkBoxRegion" type="checkbox"> <span class="checkboxFontSize">Region</span>&nbsp;&nbsp;&nbsp;

<label for="checkBoxProductName" class="sr-only">ProductName:</label>
<input id="checkBoxProductName" name="checkBoxProductName" type="checkbox"> <span class="checkboxFontSize">Product Name</span> &nbsp;&nbsp;&nbsp;

<label for="checkBoxStoreName" class="sr-only">StoreName:</label>
<input id="checkBoxStoreName" name="checkBoxStoreName" type="checkbox"> 
<span class="checkboxFontSize">Store Name</span>
</form>

0 个答案:

没有答案