使用ajax更改div文本不起作用

Posted 2023-03-05

【中文标题】使用ajax更改div文本不起作用

【英文标题】：change div text with ajax not working

【发布时间】：2017-01-03 13:51:06

【问题描述】：

我做错了什么？

我尝试使用 ajax 更改 div 文本...但什么也没做...我想问题出在我的控制器方法中..

这是我的 div

<div id="div1">
   text to change
</div>

<button>change text</button>

@section scripts
<script>
    $(document).ready(function() 
        $("button").click(function () 
            $.ajax(
                url: "/Home/ChangeText", success: function (result) 
                    $("#Div1").html(result);
                
            );
        );
        );
</script>

这是我的控制器

public JsonResult ChangeText()

    var result = "New Text";

    return Json(result, JsonRequestBehavior.AllowGet);

注意：运行时会进入“ChangeText”方法，但不会在我的视图上打印结果（新文本）

【问题讨论】：

$("#Div1") 应该是 $("#div1") - JS 区分大小写 - 还要将 type="button" 添加到您的按钮，因为某些浏览器会提交页面，否则

谢谢...那是我遇到的不好...

@mplungjan 这不是 javascript 区分大小写的情况，而是 HTML ids 区分大小写的情况。在其他情况下，这并不重要，例如带有标签名称。 jQuery $('DIV') 完全等同于 $('div')。

还是区分大小写

【参考方案1】：

你写了<div id="div1"> 和$("#Div1").html(result);。但是div1 不等于Div1，第一个符号很大（大写）。 JavaScript 对大小写敏感。

---

type 属性指定按钮的类型。始终为<button> 元素指定类型属性。不同的浏览器可能对<button> 元素使用不同的默认类型。如果您想向控制器发送数据 - 编写按钮类型 type="button" 或 type="submit"。

属性值和描述：

button - 按钮是一个可点击的按钮 submit - 按钮是一个提交按钮（提交表单数据） reset - 按钮是一个重置按钮（将表单数据重置为其初始值）

---

试试这个代码：

<div id="div1">
   text to change
</div>

<button type="button">change text</button>

@section scripts
<script>
    $(document).ready(function() 
        $("button").click(function () 
            $.ajax(
                url: "/Home/ChangeText", success: function (result) 
                    $("#div1").html(result); // Div1 != div1
                
            );
        );
    );
</script>

【讨论】：

由于您回答了这个错字 - 即使已经有评论解释了问题，OP 也无法删除该问题。另外，在回答时，请解释您修复的代码以及代码。