ajax調轉界面,jquery ajax 简单范例(界面+后台)

界面:

复制代码 代码如下:

$(document).ready(function () {

$("#b01").click(function () {

htmlobj = $.ajax({ url: "/Content/upFile/测试.txt", async: false });

$("#div01").html(htmlobj.responseText);

});

});

$(document).ready(function () {

$("#test").load("/Content/upFile/测试2.txt #p1", function (responseTxt, statusTxt, xhr) {

if (statusTxt == "success")

alert("外部内容加载成功!" + xhr);

if (statusTxt == "error")

alert("Error: " + xhr.status + ": " + xhr.statusText);

});

});

$(document).ready(function () {

$("#getbutton").click(function () {

$.get("/DownSet/index", function (data, status) {

alert("数据:" + data + "\n状态:" + status);

});

});

});

$(document).ready(function () {

$("#postbutton").click(function () {

$.get("/CustomerInformation/getS", { par: "ww" }, function (data, status) {

alert("数据:" + data + "\n状态:" + status);

$("#postText").html(data);

});

});

});

post方法加载文本后 会在这里显示

get方法加载文本后 会在这里显示

jquery load方法加载的显示在这里

加载文本后 会在这里显示

加载文本后 会在这里显示

后台:

复制代码 代码如下:

public string getS(string par)

{

string content = "";

if (par.Equals("ww"))

{

content = "cheng gong le";

}

else

{

content = "shi bai le";

}

return content;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,需要先引入jQuery库文件。可以在HTML文件中添加以下代码: ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 接着,需要编写一个前端界面,并添加一个按钮,用于触发ajax请求: ```html <!DOCTYPE html> <html> <head> <title>jQuery + Ajax Demo</title> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({ url: "test.php", // 请求的URL地址 type: "POST", // 请求方式 data: {name: "John", age: 30}, // 发送的数据 dataType: "json", // 返回的数据类型 success: function(result){ $("#output").text(result.message); // 将返回的结果显示在页面上 }, error: function(xhr, status, error){ alert("请求失败:" + error); // 请求失败时弹出提示框 } }); }); }); </script> </head> <body> <button>点击发送请求</button> <div id="output"></div> </body> </html> ``` 在上面的代码中,当按钮被点击时,会执行一个ajax请求,请求的URL地址为"test.php",请求方式为POST,发送的数据为{name: "John", age: 30},返回的数据类型为json。请求成功后,将返回的结果显示在页面上。 当请求失败时,会弹出一个提示框,显示请求失败的原因。 最后,需要在后端编写一个处理请求的PHP文件(test.php),对请求进行处理,并将处理结果返回给前端。例如: ```php <?php if(isset($_POST['name']) && isset($_POST['age'])){ $name = $_POST['name']; $age = $_POST['age']; $message = "Hello, " . $name . "! Your age is " . $age . "."; $result = array("message" => $message); echo json_encode($result); }else{ echo "参数错误"; } ?> ``` 在上面的PHP文件中,首先判断前端发送的数据是否正确,如果正确,则将数据进行处理,并将处理结果返回给前端。如果参数错误,则返回一个错误提示。 以上就是使用jQuery + Ajax实现前端界面的搭建的简单介绍。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值