Question

美好的一天，

我有一个按钮

<button id="4" onclick="UpdateStatus(this.id)" class="btn btn-default" type="button">update</button>

正在调用ajax函数

   <script>
    $(document).ready(function () {            

        function UpdateStatus(Id) {                
            $.ajax({
                type: "Post",//or POST
                url: '/myController/UpdateSomething?Id=' + Id,
                //  (or whatever your url is)
                data: { data1: var1 },               
                success: function (responsedata) {
                    // process on data
                    alert("got response as " + "'" + responsedata + "'");
                }
            });
        }
    }
</script>

我的问题是我在视图中收到错误：

UpdateStatus is not defined at HTMLButtonElement.onclick

我在做什么错？谢谢

更新

当我尝试运行此代码时

  @section scripts
  {   
   <script>
    $(document).ready(function () {
    //Carga datos del curso
    console.log("asdf");   
});</script>}

我没有在控制台中收到消息。

Answer 1

问题是，您正在jQuery的document.ready事件中定义方法定义。解析并呈现按钮标记时，未定义JavaScript方法，因此会出现错误。

当文档准备就绪时，jquery ready方法将在稍后执行（已经完成HTML的解析和渲染，可以安全地访问DOM）。至此，HTML已被渲染。

在它外面定义它。

<script>

function UpdateStatus(Id) {
   alert('UpdateStatus called');                
}
$(function () {

});

</script>

另一种选择是使用unobutrusive JavaScript。因此，无需将click事件处理程序连接到按钮标记，而是在触发文档就绪后再连接。

<button id="4" class="btn btn-default" type="button">update</button>

连接点击事件

$(function () {
    $("#4").click(function (e) {
        e.preventDefault();
        alert('User clicked');
    });
});

Answer 2

这绝对是一个范围界定问题，因为UpdateStatus在document.ready()函数范围内定义。您可以将UpdateStatus声明为document.ready()块之外的变量，并在其中声明一个函数：

var UpdateStatus;

$(document).ready(function () {
    UpdateStatus = function () {
        var buttonId = $('#4').attr('id');

        $.ajax({
            type: "POST",
            url: '/myController/UpdateSomething',
            data: { Id: buttonId, ... }, // setting parameters            
            success: function (responsedata) {
                // process on data
                alert("got response as '" + responsedata + "'");
            }
        });
    }
});

另外，基于标准事件注册模型和separation of concerns，我建议您通过检索按钮ID来使用不引人注目的JavaScript：

$(document).ready(function () {
    $('#4').click(function() {
        var buttonId = $(this).attr('id');

        $.ajax({
            type: "POST",
            url: '/myController/UpdateSomething',
            data: { Id: buttonId, ... }, // setting parameters            
            success: function (responsedata) {
                // process on data
                alert("got response as '" + responsedata + "'");
            }
        });
    });
});

由于您使用的是AJAX POST，因此无需在url: '/myController/UpdateSomething?Id=' + Id之类的URL中使用查询字符串参数。

相关问题：

Uncaught ReferenceError: (function) is not defined at HTMLButtonElement.onclick

Why is inline event handler attributes a bad idea in modern semantic HTML?

Answer 3

<script>
    function F(user_id) {
    var user_id = user_id;
    $.ajax({
        type:"GET",
        url:"http://127.0.0.1:8000/preference",
        data: {'user_id':user_id},
        async: false,
        success: function (result) {
            console.log(result)
        }
    });

}
</script>

第一行自动不显示。它是脚本的类型和src属性。我使用了“文本/ javascript”和“ http://code.jquery.com/jquery-latest.js”。这个问题我找到2个解决方案。一种如上所述。将脚本分为两部分。其次是将功能移到按钮标签下。这确实是一个范围问题。但是我没有找到解决方案的逻辑。但是我解决了。

在HTMLButtonElement.onclick中未定义<function>

3 个答案: