Question

我正在尝试实现以下代码，该代码应创建文本字段和按钮。然后我想使用ajax调用来运行我的python脚本。但由于某种原因，ajax调用失败，并带有以下代码：

<div id=myapp-content data-role="page">

    <form id="fome" method="post">
     <input type="text" name="gettable" value="">
     <button>SUBMIT</button>
    </form>

    <script>
    database = 'localhost:28017';
    $('button').click(function (){

        var input_val_from_button = document.getElementsByName("gettable")[0].value;
        console.log("Value Entered: " + input_val_from_button);

        var results;

        $.ajax({
            type: "GET",

我确实设法通过用输入标签替换按钮标签来获得ajax，但是每次单击文本字段时javascript都会运行ajax代码。所以我没有按钮，而是按钮：

<input type="submit" name="command" value="SUBMIT">

</form>
        <script>
        database = 'localhost:28017';
        $('button').click(function (){

关于如何让ajax工作的任何想法？我需要它在点击按钮后运行。

以下是更多ajax部分：

    $.ajax({
        type: "GET",
        url: "service/findRecord/"+input_val_from_button,
        dataType: "json",
        success: function(result) {
            console.log(result);
                            //do some stuff...
            },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log("Ajax error");
            console.log("xhr status: "+xhr.status);
            console.log(thrownError);
        },
        complete: function(){console.log("Finish ajax");}
    });

})
</script>

Answer 1

看起来问题是在点击按钮后它会提交表单。这是因为默认类型<button>是submit，所以实际上你的标记等于这个：

<form id="fome" method="post">
    <input type="text" name="gettable" value="">
    <button type="submit">SUBMIT</button>
</form>

要解决此问题，只需阻止hanler中按钮的默认行为：

$('button').click(function (e){
    e.preventDefault();
    // rest of the code unchanged

Jquery ajax调用仅适用于第一页加载

1 个答案: