Question

我意识到这可能是重复的，但我一直在看这个2个小时，但是找不到我做错了什么，看着其他帖子没有显示我的错误。

我在处理CodeIgniter下的AJAX调用中返回的JSON时遇到了挑战。我是AJAX的新手，我正在从我读过的东西和其他自我教学中进行调整。一切都运行良好，除了不是在div中显示结果消息，我的页面刷新并以原始文本显示JSON。

function makeAjaxCall(){

    $.ajax({
        url: "http://localhost/testing/index.php/urlsaving/jquery_save",
        cache: false,
        data: $('#frm').serialize(),
        dataType : 'json',
        type: "post",
        success: function( data ){
            $('#validation-error').html(data.msg);
        //have tried 'return false;' here to halt the default action
        }
    });
}

这是发送请求的表单以及我希望显示返回数据的位置：

<!DOCTYPE html>
<html>
<head>
<title>URL saving sandbox</title>
</head>
<body>
<div id="adding_urls">
    <form action="http://localhost/testing/index.php/urlsaving/jquery_save" method="post" accept-charset="utf-8" id="frm">

    <div id="validation-error"></div> < -- div where I want feed back  posted

    <h2>Enter Web Address:</h2>
    <input type="text" name="url" value="" size="75" /> <br>

    <div><input type="submit" onclick="javascript:makeAjaxCall();" id="submit_frm" value="Submit" /></div>

    </form>
</div><!-- /adding_urls  -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
    <script type="text/javascript" src="http://localhost/testing/js/another_method.js"></script>

    </body>
</html>

Answer 1

删除内联事件处理程序（javascript:makeAjaxCall()事物）并执行

$('#frm').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url      : "http://localhost/testing/index.php/urlsaving/jquery_save",
        cache    : false,
        data     : $(this).serialize(),
        dataType : 'json',
        type     : "post",
        success  : function( data ){
            $('#validation-error').html(data.msg);
        }
    });
});

Answer 2

您需要捕获事件：

function makeAjaxCall(event){
    event.stopPropagation();
    event.preventDefault();
    $.ajax...
}

您也可以将提交按钮更改为常规按钮<button>或<input type="button" value="Submit" onclick="makeAjaxCall();"/>

然后从标记中删除点击处理程序：

<input id="ajaxButton" type="button" value="Submit" />

$('#ajaxButton').on('click', makeAjaxCall);

页面刷新而不是显示ajax数据

2 个答案: