文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Jquery交互的方式都有哪些

2023-05-14 21:46

关注

Jquery交互的方式都有哪些

本教程操作环境:windows7系统、jquery3.6版本、Dell G3电脑。

jquery ajax前后台交互的6种方式

第一种:load,从服务器加载数据,并把返回的数据放入被选元素中

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton").click(function(){
        $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                alert("成功");
            }
            if(statusTxt=="error"){
                alert("失败:"+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
</script>
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,  
加载到指定的 <div> 元素中:
实例:
$("#div1").load("demo_test.txt #p1");

第二种:GET方式:

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",null,function(data,status){   
            alert(data+":"+status);
        });
    });
});

第三种:POST方式:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/Json/JsonServlet", {
                name:"我是谁",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>

POST要和后台Servlet交互:

response.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));
        response.getWriter().println("你找到我了");

后台输出:

我是谁
12

要访问后台servlet也可以直接如此写地址:

$.get("JsonServlet",

第四种:getJSON方式:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是谁",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });
</script>

返回的就直接是json格式的对象,无需JSON.parse的方法转换。

注意:不管是哪种方式后台都有两种方式和前台交互:

第一种后台交互:直接拼接字符串。

response.getWriter().  
print("{\"name\":\"爱你\",\"age\":12}");

第二种 传入JSON对象:

JSONObject jsonObject =  
new JSONObject("{'name':'爱你','age':12}");
response.getWriter().print(jsonObject);

相同的最终传递给前台的时候都默认以字符串的形式传递过去,
注意的是除了getJSON方式 前台可以使用两种方式来将字符串转换成js对象:

1. eval()函数  :不推荐,有隐患 会执行其他js操作
2. JSON.parse()函数 :推荐:只执行对象转换操作

你们是不是还要问 不是有五种吗 为啥子前面就讲了四种?

没错 还有一种:

第五种:jQuery.ajax():

执行异步 HTTP (Ajax) 请求

该方法是 jQuery 底层 AJAX 实现,所有的 jQuery AJAX 方法都使用 ajax() 方法。 。简单易用的高层实现见 .get

以上就是Jquery交互的方式都有哪些的详细内容,更多请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯