Ajax学习笔记1

1、编程设计一个json对象,用于保存学生的相关资料:

1.首先定义一个json对象jsonStu,保存学生的"姓名"和"分数"信息.
2.然后,通过调用$.each()工具函数,遍历该数据,分别获取"姓名"和"分数"信息.
3.最后,将遍历后获取的整个内容显示在页面中.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <title>挑战题</title>
    </head>
    <body>
        <form>
            <input type="text" name="name" value="请输入姓名" id="stuName"><br>
            <input type="text" name="score" value="请输入成绩" id="stuScore"><br>
            <input type="button" value="保存" id="b-1">
            <input type="button" value="显示" id="b-2">
        </form>
        <ul></ul>
        <script>
        var $name=$("#stuName");
        var $score=$("#stuScore");
        var jsonStu=[];
        $("#b-1").click(function(){
             jsonStu.push({
                    name : $name.val(), 
                    score: $score.val() 
                });
                $name.val('');
                $score.val('');
        });
        $("#b-2").click(function(){
            $.each(jsonStu,function (i) {
                    $('ul').append('<li><b>'+ jsonStu[i].name + '</b>的分数是<b>' + jsonStu[i].score + '</b></li>');
            }); 
        });
        </script>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_38823480/article/details/82925616