JSON jquery ajax 火推笔记

最新推荐文章于 2018-07-09 17:09:00 发布

qq1350048638

最新推荐文章于 2018-07-09 17:09:00 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/qq1350048638/article/details/78501682

版权

一 JSON

1 、json是什么？
    英文全称 JavaScript Object Notation
    即javascript对象格式

2、json作用？
    JSON 是存储和交换文本信息的语法。类似 XML。
    JSON 比 XML 更小、更快，更易解析。
    通常用于服务端向网页传递数据 
    独立于语言

3、json样式？
    （1）单个对象
    {"name":"张三","sex":"男"，"age":18}
    (2)多个对象即数组
    [{"name":"张三","sex":"男"，"age":18},{"name":"李
    四","sex":"男"，"age":22}，{"name":"王五","sex":"男"，"age":28}]
4、使用？
    （1） JSON - 转换为 JavaScript 对象 --》eval()
        <script type="text/javascript">
    $(function() {
    //单个json对象
    var txt='{"name":"张三","sex":"男","age":18}';
    var obj=eval("("+txt+")");//把json格式转为javascript对象格式
    alert(obj.name+" "+obj.sex+" "+obj.age);//即可以通过:对象名.属性  输出
    $("#name").val(obj.name)
    $("#sex").val(obj.sex)
    $("#age").val(obj.age)

    //多个json对象
    var txtmany = '[{"name":"张三","sex":"男","age":18},{"name":"李四","sex":"男","age":22},{"name":"王五","sex":"男","age":28}]';
    var objmany = JSON.parse(txtmany);//把json格式转为javascript对象格式
    for (i = 0; i < objmany.length; i++) {
        //alert(objmany[i].name)
        $("#show").append(
                "<p>" + objmany[i].name + " " + objmany[i].sex + " "
                        + objmany[i].age + "</p>");

            $("#showtab").append(
                "<tr><td>" + objmany[i].name + "</td><td>" + objmany[i].sex + "</td><td>"
                        + objmany[i].age + "</td></tr>");
    }
})
    </script>

    <input name="name" id="name" type="text">
<input name="sex" id="sex" type="text">
<input name="age" id="age" type="text">
<div id="show"></div>
<table border="1" align="center" width=600>
<tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
<tbody id="showtab"></tbody>
<tr><td colspan="22"> 联系电话：0101-88678766</td></tr>
</table>

二、java生成json

开发步骤
1、导入json所需的jar

也有的企业用简化版的:GSON: Gson gson = new Gson(); Person person = gson.fromJson(jsonData,Person.class); 2、开发dao和实现dao (1)查询单个对象 public Person getPerson(int id) { String sql="select id,name,money,tochar(jobtime,'yyyy-mm-dd hh24:mi:ss') from jsonperson where id=?"; Person per=null; ResultSet rs = executeQuery(sql, new Object[]{id}); try { if(rs.next()){ per=new Person(rs.getInt(1), rs.getString(2), rs.getFloat(3), rs.getString(4)); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } return per; }

(2)查询多个对象并生成集合
public List<Person> list() {
    String sql="select id,name,money,to_char(jobtime,'yyyy-mm-dd hh24:mi:ss') from json_person";
    Person per=null;
    ResultSet rs = executeQuery(sql, new Object[]{});
    List<Person> list=new ArrayList<Person>();
    try {
        while(rs.next()){
                per=new Person(rs.getInt(1), rs.getString(2), rs.getFloat(3), rs.getString(4));
        list.add(per);
        }
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return list;
}

3 在servlet中生成json单个对象
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //处理乱码
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html; charset=utf-8");
    response.setCharacterEncoding("utf-8");
    //获取id
    int id=Integer.parseInt(request.getParameter("id"));
    //创建out
    PrintWriter out = response.getWriter();
    PersonDaoImpl db=new PersonDaoImpl();
    Person person = db.getPerson(id);
    JSONObject jo=new JSONObject();//创建单个:json对象
    out.print(jo.fromObject(person));//fromObject(person)把对象生成json，然后输出
}

4、在servlet中生成json多个对象
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //处理乱码
    request.setCharacterEncoding("utf-8");
    response.setContentType("text/html; charset=utf-8");
    response.setCharacterEncoding("utf-8");
    //创建out
    PrintWriter out = response.getWriter();
    PersonDaoImpl db=new PersonDaoImpl();
    List<Person> list = db.list();
    JSONArray jo=new JSONArray();//创建多个:json数组
    out.print(jo.fromObject(list));//fromObject(person)把对象生成json，然后输出
}

实现开发中：如果对方给定json格式，一定要验证一下
    通过：https://www.bejson.com/

ajax

1、ajax是什么？
    ajax全称：Asynchronous JavaScript and XML
    即:异步javascript和xml
    补充：异步和同步区别？
    同步交互：指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程；

    异步交互：指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待

2、为什么要使用ajax?能给我们带来什么发处？
    (1)AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

    (2)AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。即局部刷新

    (3)AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

如何使用ajax?

原生ajax?(了解)

XMLHttpRequest 是 AJAX 的基础,是浏览器内置

<script type="text/javascript">
//开发步骤:1 创建  XMLHttpRequest
    var xmlhttp;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //开发步骤:2 向服务器发请求
    xmlhttp.open("GET","ajax_info.txt",true);
    // method：请求的类型；GET 或 POST url：文件在服务器上的位置async：true（异步）或 false（同步）

    xmlhttp.send();
    //开发步骤:3  服务器 响应
//响应方式：responseText     获得字符串形式的响应数据(一般使用)responseXML   获得 XML 形式的响应数据。
xmlhttp.onreadystatechange=function()
{
        //4: 请求已完成，且响应已就绪,  200: "OK"
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            var json = JSON.parse(xmlhttp.responseText);
            document.getElementById("showtab").innerHTML = "<tr><td>"
                    + json.id + "</td><td>" + json.name + "</td><td>"
                    + json.money + " </td><td>" + json.jobtime
                    + "</td></tr>"

    }
}
</script>
<div id="myDiv"></div>

jquery中的ajax

一、jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()，我们重点掌握:$.get() 和 $.post()及$.ajax()

二、$.post()的使用

$.post(url, [data], [callback], [type]) 
url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。
注：位置不能改变


三、$.get()的使用

$.get(url, [data], [callback], [type]) 
url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。
注：位置不能改变

$.post(
"LoginServlet",//接收地址
{"name":name,"pwd":pwd},//将要传送的数据
    //$("#form1").serialize()表示表单中所有
function(msg){//成功后的回调
    alert("服务器回调信息为:"+msg)
    if(msg==0){
    alert("用户名或密码不符!!");
    }else{
    alert("合法用户!!");
    location="main.jsp";
    }
    },"text"
    )

注：text也可以不写，将自动适应

四 $.ajax使用

$.ajax(url,[settings])
返回值:XMLHttpRequestjQuery.ajax(url,[settings])

$.ajax({
    type:"post",//发送类型
    url:"LoginServlet",//接收地址
    data:$("#form1").serialize(),//{"name":name,"pwd":pwd},//将要传送的数据
    //serialize()表示表单中所有
    dataType:"text",//传送的数据类型，不写自动识别
    success:function(msg){//成功后的回调
    alert("服务器回调信息为:"+msg)
    if(msg==0){
    alert("用户名或密码不符!!");
    }else{
    alert("合法用户!!");
    location="main.jsp";
    }
    }
    }) //位置没有固定顺序