SpringBoot+jQuery添加數據

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入數據</title>
<scriptsrc="/jquery_2_1.min.js"></script>
</head>
<body>
<form id="form-add">
用戶名：<input type="text"  name="userName"><br>  
密碼：<input type="text" name="passWord"><br/>
<input id="btn-add" type="button" value="添加數據" />
</form>
<script type="text/javascript">
$("#btn-add").click(function() {    
   $.ajax({
       url: "/usersave2",
       type: "post",
       data: $("#form-add").serialize(),      
       dataType: "json",
       success: function(res) {
           if (res.success) {
          alert(res.msg);
   location.href="/userlist";
          } else {
               alert("注冊失敗！" + res.message);
          }
      },
       error:function(xhr){
      alert("發生錯誤"+xhr.status);
      }
  });
});
</script>
</body>
</html>

Query的介紹

學習目標

能夠知道jQuery的作用及優點

1. jQuery的定義

jQuery是對JavaScript的封裝，它是免費、開源的JavaScript函數庫，jQuery 極大地簡化了 JavaScript 編程。

2. jQuery的作用

jQuery和JavaScript它們的作用一樣，都是負責網頁行為操作，增加網頁和用戶的交互效果的，只不過jQuery簡化了JavaScript編程，jQuery實現交互效果更簡單。

3. jQuery的優點

jQuery兼容了現在主流的瀏覽器，增加了程序員的開發效率。
jQuery簡化了 JavaScript 編程，代碼編寫更加簡單。

4. 小結

jQuery是一個免費、開源的JavaScript函數庫
jQuery的作用和JavaScript一樣，都是負責網頁和用戶的交互效果。
jQuery的優點就是兼容主流瀏覽器，代碼編寫更加簡單。

jQuery的用法

學習目標

能夠知道jQuery的引入方式
能夠說出兩種jQuery入口函數的寫法

1. jQuery的引入

<script src="js/jquery-1.12.4.min.js"></script>

2. jQuery的入口函數

我們知道使用js獲取標簽元素，需要頁面加載完成以后再獲取，我們通過給onload事件屬性設置了一個函數來獲取標簽元素，而jquery提供了ready函數來解決這個問題，保證獲取標簽元素沒有問題，它的速度比原生的 window.onload 更快。

入口函數示例代碼:


<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload=function(){
        var oDiv=document.getElementById('div01');
        alert('原生就是獲取的div：' + oDiv);
    };
    $(document).ready(function(){
        var $div=$('#div01');
        alert('jquery獲取的div：' + $div);
    });
</script>

<div id="div01">這是一個div</div>

入口函數的簡寫示例代碼:


<script src="js/jquery-1.12.4.min.js"></script>
<script>
    window.onload=function(){
        var oDiv=document.getElementById('div01');
        alert('原生就是獲取的div：' + oDiv);
    };

    /*
    $(document).ready(function(){
        var $div=$('#div01');
        alert('jquery獲取的div：' + $div);
    });
    */

    // 上面ready的寫法可以簡寫成下面的形式：
    $(function(){
        var $div=$('#div01');
        alert('jquery獲取的div：' + $div);
    }); 
</script>

<div id="div01">這是一個div</div>

3. 小結

引入jQuery
獲取標簽元素需要在入口函數來完成，它的速度比原生的 window.onload 更快
jQuery入口函數有兩種寫法:
// 完整寫法 $(document).ready(function(){ ... }); // 簡化寫法 $(function(){ ... });

jQuery選擇器

學習目標

能夠使用jQuery選擇器獲取標簽元素

1. jQuery選擇器的介紹

jquery選擇器就是快速選擇標簽元素，獲取標簽的，選擇規則和css樣式一樣。

2. jQuery選擇器的種類

標簽選擇器
類選擇器
id選擇器
層級選擇器
屬性選擇器

示例代碼:

$('#myId') //選擇id為myId的標簽
$('.myClass') // 選擇class為myClass的標簽
$('li') //選擇所有的li標簽
$('#ul1 li span') //選擇id為ul1標簽下的所有li標簽下的span標簽
$('input[name=first]') // 選擇name屬性等于first的input標簽

說明:
可以使用length屬性來判斷標簽是否選擇成功, 如果length大于0表示選擇成功，否則選擇失敗。

$(function(){
    result=$("div").length;
    alert(result);
});

3. 小結

jQuery選擇器就是選擇標簽的
標簽選擇器是根據標簽名來選擇標簽
類選擇器是根據類名來選擇標簽
id選擇器是根據id來選擇標簽
層級選擇器是根據層級關系來選擇標簽
屬性選擇器是根據屬性名來選擇標簽

選擇集過濾

學習目標

能夠使用選擇器進行標簽過濾

1. 選擇集過濾的介紹

選擇集過濾就是在選擇標簽的集合里面過濾自己需要的標簽

2. 選擇集過濾的操作

has(選擇器名稱)方法，表示選取包含指定選擇器的標簽
eq(索引)方法，表示選取指定索引的標簽

has方法的示例代碼:

<script>
    $(function(){
        //  has方法的使用
        var $div=$("div").has("#mytext");
        //  設置樣式
        $div.css({"background":"red"});
    });
</script>

<div>
    這是第一個div
    <input type="text" id="mytext">
</div>

<div>
    這是第二個div
    <input type="text">
    <input type="button">
</div>

eq方法的示例代碼:

<script>
    $(function(){
        //  has方法的使用
        var $div=$("div").has("#mytext");
        //  設置樣式
        $div.css({"background":"red"});

        //  eq方法的使用
        var $div=$("div").eq(1);
        //  設置樣式
        $div.css({"background":"yellow"});
    });
</script>

<div>
    這是第一個div
    <input type="text" id="mytext">
</div>

<div>
    這是第二個div
    <input type="text">
    <input type="button">
</div>

3. 小結

選擇集過濾可以使用has方法和eq方法來完成
jquery給標簽設置樣式使用css方法

選擇集轉移

學習目標

能夠說出2種選擇集轉移方法

1. 選擇集轉移介紹

選擇集轉移就是以選擇的標簽為參照，然后獲取轉移后的標簽

2. 選擇集轉移操作

$('#box').prev(); 表示選擇id是box元素的上一個的同級元素
$('#box').prevAll(); 表示選擇id是box元素的上面所有的同級元素
$('#box').next(); 表示選擇id是box元素的下一個的同級元素
$('#box').nextAll(); 表示選擇id是box元素的下面所有的同級元素
$('#box').parent(); 表示選擇id是box元素的父元素
$('#box').children(); 表示選擇id是box元素的所有子元素
$('#box').siblings(); 表示選擇id是box元素的其它同級元素
$('#box').find('.myClass'); 表示選擇id是box元素的class等于myClass的元素

選擇集轉移的示例代碼:

<script>
    $(function(){
        var $div=$('#div01');

        $div.prev().css({'color':'red'});
        $div.prevAll().css({'text-indent':50});
        $div.next().css({'color':'blue'});
        $div.nextAll().css({'text-indent':80});
        $div.siblings().css({'text-decoration':'underline'})
        $div.parent().css({'background':'gray'});
        $div.children().css({'color':'red'});
        $div.find('.sp02').css({'font-size':30});
    });  
</script>

<div>
    <h2>這是第一個h2標簽</h2>
    <p>這是第一個段落</p>
    <div id="div01">這是一個<span>div</span><span class="sp02">第二個span</span></div>
    <h2>這是第二個h2標簽</h2>
    <p>這是第二個段落</p>
</div>

3. 小結

prev() 表示獲取上一個同級元素
prevAll() 表示獲取上面所有同級元素
next() 表示獲取下一個同級元素
nextAll() 表示獲取下面所有同級元素
parent() 表示獲取父元素
children() 表示獲取所有的子元素
siblings() 表示獲取其它同級元素
find("選擇器名稱") 表示獲取指定選擇器的元素

獲取和設置元素內容

學習目標

能夠知道獲取和設置元素內容的操作

1. html方法的使用

jquery中的html方法可以獲取和設置標簽的html內容

示例代碼:

<script>
    $(function(){

        var $div=$("#div1");
        //  獲取標簽的html內容
        var result=$div.html();
        alert(result);
        //  設置標簽的html內容，之前的內容會清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html內容
        $div.append("<span style='color:red'>你好</span>");

    });
</script>

<div id="div1">
    <p>hello</p>
</div>

說明:

給指定標簽追加html內容使用append方法

2. 小結

獲取和設置元素的內容使用: html方法
給指定元素追加html內容使用: append方法

獲取和設置元素屬性

學習目標

能夠知道獲取和設置元素屬性的操作

1. prop方法的使用

之前使用css方法可以給標簽設置樣式屬性，那么設置標簽的其它屬性可以使用prop方法了。

示例代碼:

<style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a=$("#link01");
        var $input=$('#input01')

        // 獲取元素屬性
        var sId=$a.prop("id");
        alert(sId);

        // 設置元素屬性
        $a.prop({"href":"http://www.baidu.com","title":'這是去到百度的鏈接',"class":"a01"});

        //  獲取value屬性
        // var sValue=$input.prop("value");
        // alert(sValue);

        // 獲取value屬性使用val()方法的簡寫方式
        var sValue=$input.val();
        alert(sValue);
        // 設置value值
        $input.val("222222");
    })
</script>

<a id="link01">這是一個鏈接</a>
<input type="text" id="input01" value="111111">

說明: 獲取value屬性和設置value屬性還可以通過val方法來完成。

2. 小結

獲取和設置元素屬性的操作可以通過prop方法來完成
獲取和設置元素的value屬性可以通過val方法來完成，更加簡單和方便

jQuery事件

學習目標

能夠說出兩個常用的jQuery事件

1. 常用事件

click() 鼠標單擊
blur() 元素失去焦點
focus() 元素獲得焦點
mouseover() 鼠標進入（進入子元素也觸發）
mouseout() 鼠標離開（離開子元素也觸發）
ready() DOM加載完成

示例代碼:

<script>
    $(function(){
        var $li=$('.list li');
        var $button=$('#button1')
        var $text=$("#text1");
        var $div=$("#div1")

        //  鼠標點擊
        $li.click(function(){             
            // this指的是當前發生事件的對象，但是它是一個原生js對象
            // this.style.background='red';

            // $(this) 指的是當前發生事件的jquery對象
            $(this).css({'background':'gold'});
            // 獲取jquery對象的索引值,通過index() 方法
            alert($(this).index());
        });

        //  一般和按鈕配合使用
        $button.click(function(){
            alert($text.val());
        });

        //  獲取焦點
        $text.focus(function(){
            $(this).css({'background':'red'});

        });

        //  失去焦點
        $text.blur(function(){
            $(this).css({'background':'white'});

        });

        //  鼠標進入
        $div.mouseover(function(){
            $(this).css({'background':'gold'});

        });

        //  鼠標離開
        $div.mouseout(function() {
            $(this).css({'background':'white'});
        });
    });
</script>

<div id="div1">
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

    <input type="text" id="text1">
    <input type="button" id="button1" value="點擊">
</div>

說明:

this指的是當前發生事件的對象，但是它是一個原生js對象
$(this) 指的是當前發生事件的jquery對象

2. 小結

jQuery常用事件:

click() 鼠標單擊
blur() 元素失去焦點
focus() 元素獲得焦點
mouseover() 鼠標進入（進入子元素也觸發）
mouseout() 鼠標離開（離開子元素也觸發）
ready() DOM加載完成

事件代理

學習目標

能夠知道事件代理的使用方式

1. 事件代理介紹

事件代理就是利用事件冒泡的原理(事件冒泡就是事件會向它的父級一級一級傳遞),把事件加到父級上，通過判斷事件來源，執行相應的子元素的操作，事件代理首先可以極大減少事件綁定次數，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。

事件冒泡代碼:


 <script>
    $(function(){

        var $div1=$('#div1');
        var $div2=$('#div2');

        $div1.click(function(){
            alert($(this).html());
        }); 

        $div2.click(function(){
            alert($(this).html());
        }); 
    });
</script>

 <div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        哈哈
    </div>
</div>

說明:

當點擊子元素div，它的點擊事件會向它父元素傳遞，也會觸發了父元素的點擊事件，這就是事件冒泡。

2. 事件代理的使用

一般綁定事件的寫法:

$(function(){
    $ali=$('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件代理的寫法

$(function(){
    $list=$('#list');
    // 父元素ul 來代理 子元素li的點擊事件
    $list.delegate('li', 'click', function() {
        // $(this)表示當前點擊的子元素對象
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

delegate方法參數說明:

delegate(childSelector,event,function)

childSelector: 子元素的選擇器
event: 事件名稱，比如: 'click'
function: 當事件觸發執行的函數

3. 小結

事件代理就是使用父元素來代理子元素的事件，好處是減少事件的綁定次數，提高性能。
使用場景當多個相同的子元素綁定同一個事件，可以使用事件代理。
事件代理使用是使用delegate方法來完成

JavaScript對象

學習目標

能夠知道JavaScript對象有兩種創建方式

1. JavaScript對象的介紹

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數等都可以認為是對象，此外，JavaScript 允許自定義對象，對象可以擁有屬性和方法。

2. JavaScript創建對象操作

創建自定義javascript對象有兩種方式:

通過頂級Object類型來實例化一個對象
通過對象字面量創建一個對象

Object類創建對象的示例代碼:

<script>
    var person=new Object();

    // 添加屬性：
    person.name='tom';
    person.age='25';

    // 添加方法：
    person.sayName=function(){
        alert(this.name);
    }

    // 調用屬性和方法：
    alert(person.age);
    person.sayName();
</script>

對象字面量創建對象的示例代碼:

<script>
    var person2={
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }

    // 調用屬性和方法：
    alert(person2.age);
    person2.sayName();
</script>

說明:

調用屬性和方法的操作都是通過點語法的方式來完成，對象的創建推薦使用字面量方式，因為更加簡單。

3. 小結

創建自定義javascript對象有兩種方式:

Object
字面量

json

學習目標

能夠知道json的格式

1. json的介紹

json是 JavaScript Object Notation 的首字母縮寫，翻譯過來就是javascript對象表示法，這里說的json就是類似于javascript對象的字符串，它同時是一種數據格式，目前這種數據格式比較流行，逐漸替換掉了傳統的xml數據格式。

2. json的格式

json有兩種格式：

對象格式
數組格式

對象格式:

對象格式的json數據，使用一對大括號({})，大括號里面放入key:value形式的鍵值對，多個鍵值對使用逗號分隔。

對象格式的json數據:

{
    "name":"tom",
    "age":18
}

格式說明:

json中的(key)屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導致讀取數據錯誤。

數組格式:

數組格式的json數據，使用一對中括號([])，中括號里面的數據使用逗號分隔。

數組格式的json數據:

["tom",18,"programmer"]

實際開發的json格式比較復雜,例如:

{
    "name":"jack",
    "age":29,
    "hobby":["reading","travel","photography"]
    "school":{
        "name":"Merrimack College",
        "location":"North Andover, MA"
    }
}

3. json數據轉換成JavaScript對象

json本質上是字符串，如果在js中操作json數據，可以將json字符串轉化為JavaScript對象。

示例代碼:

var sJson='{"name":"tom","age":18}';
var oPerson=JSON.parse(sJson);

// 操作屬性
alert(oPerson.name);
alert(oPerson.age);

4. 小結

json就是一個javascript對象表示法，json本質上是一個字符串。
json有兩種格式：1. 對象格式, 2. 數組格式

ajax

學習目標

能夠知道ajax的作用

1. ajax的介紹

ajax 是 Asynchronous JavaScript and XML的簡寫，ajax一個前后臺配合的技術，它可以讓 javascript 發送異步的 http 請求，與后臺通信進行數據的獲取，ajax 最大的優點是實現局部刷新，ajax可以發送http請求，當獲取到后臺數據的時候更新頁面顯示數據實現局部刷新，在這里大家只需要記住，當前端頁面想和后臺服務器進行數據交互就可以使用ajax了。

這里提示一下大家, 在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。

2. ajax的使用

jquery將它封裝成了一個方法$.ajax()，我們可以直接用這個方法來執行ajax請求。

示例代碼:

<script>
    $.ajax({
    // 1.url 請求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 請求方式，默認是'GET'，常用的還有'POST'
    type:'GET',
    // 3.dataType 設置返回的數據格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 設置發送給服務器的數據, 沒有參數不需要設置

    // 5.success 設置請求成功后的回調函數
    success:function (response) {
        console.log(response);    
    },
    // 6.error 設置請求失敗后的回調函數
    error:function () {
        alert("請求失敗,請稍后再試!");
    },
    // 7.async 設置是否異步，默認值是'true'，表示異步，一般不用寫
    async:true
});
</script>

ajax方法的參數說明:

url 請求地址
type 請求方式，默認是'GET'，常用的還有'POST'
dataType 設置返回的數據格式，常用的是'json'格式
data 設置發送給服務器的數據，沒有參數不需要設置
success 設置請求成功后的回調函數
error 設置請求失敗后的回調函數
async 設置是否異步，默認值是'true'，表示異步，一般不用寫
同步和異步說明同步是一個ajax請求完成另外一個才可以請求，需要等待上一個ajax請求完成，好比線程同步。異步是多個ajax同時請求，不需要等待其它ajax請求完成，好比線程異步。

ajax的簡寫方式:

$.ajax按照請求方式可以簡寫成$.get或者$.post方式

ajax簡寫方式的示例代碼:

 <script>
    $(function(){
        /*
         1. url 請求地址
         2. data 設置發送給服務器的數據, 沒有參數不需要設置
         3. success 設置請求成功后的回調函數
         4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("網絡異常");
        });

        /*
         1. url 請求地址
         2. data 設置發送給服務器的數據, 沒有參數不需要設置
         3. success 設置請求成功后的回調函數
         4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name); 
            console.log(data.time); 
        }, "json").error(function(){
            alert("網絡異常");
        }); 
    });


</script>

$.get和$.post方法的參數說明:

$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)

url 請求地址
data 設置發送給服務器的數據，沒有參數不需要設置
success 設置請求成功后的回調函數data 請求的結果數據status 請求的狀態信息, 比如: "success"xhr 底層發送http請求XMLHttpRequest對象
dataType 設置返回的數據格式"xml""html""text""json"
error 表示錯誤異常處理func 錯誤異常回調函數

3. 小結

ajax 是發送http請求獲取后臺服務器數據的技術
ajax的簡寫方式可以使用$.get和$.post方法來完成

過 jQuery，可以很容易地添加新元素/內容。

添加新的 HTML 內容

我們將學習用于添加新內容的四個 jQuery 方法：

append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之后插入內容
before() - 在被選元素之前插入內容

jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內容。

實例

$("p").append("追加文本");

嘗試一下 ?

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內容。

實例

$("p").prepend("在開頭追加文本");

通過 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我們只在被選元素的開頭/結尾插入文本/HTML。

不過，append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。

在下面的例子中，我們創建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：

實例

functionappendText(){vartxt1="文本。"; // 使用 HTML 標簽創建文本vartxt2=$("").text("文本。"); // 使用 jQuery 創建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

嘗試一下 ?

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素之后插入內容。

jQuery before() 方法在被選元素之前插入內容。

實例

$("img").after("在后面添加文本"); $("img").before("在前面添加文本");

嘗試一下 ?

通過 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。

在下面的例子中，我們創建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：

實例

functionafterText(){vartxt1="I "; // 使用 HTML 創建元素vartxt2=$("").text("love "); // 使用 jQuery 創建元素vartxt3=document.createElement("big"); // 使用 DOM 創建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}

在線咨詢

上一篇：JavaScript兩個快速調試的技巧
下一篇：「得得預警」供應鏈攻擊再起，黑客入侵JavaScri

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

SpringBoot+jQuery添加數據

Query的介紹

1. jQuery的定義

2. jQuery的作用

3. jQuery的優點

4. 小結

jQuery的用法

1. jQuery的引入

2. jQuery的入口函數

3. 小結

jQuery選擇器

1. jQuery選擇器的介紹

2. jQuery選擇器的種類

3. 小結

選擇集過濾

1. 選擇集過濾的介紹

2. 選擇集過濾的操作

3. 小結

選擇集轉移

1. 選擇集轉移介紹

2. 選擇集轉移操作

3. 小結

獲取和設置元素內容

1. html方法的使用

2. 小結

獲取和設置元素屬性

1. prop方法的使用

2. 小結

jQuery事件

1. 常用事件

2. 小結

事件代理

1. 事件代理介紹

2. 事件代理的使用

3. 小結

JavaScript對象

1. JavaScript對象的介紹

2. JavaScript創建對象操作

3. 小結

json

1. json的介紹

2. json的格式

3. json數據轉換成JavaScript對象

4. 小結

ajax

1. ajax的介紹

2. ajax的使用

3. 小結

您的項目需求