Web前端速成(Html+Css+JavaScript+jQuery)-17.jQuery-前后台数据交互

• 内容摘要：
  • 介绍jQuery框架下操作页面元素的方法和jQuery框架下ajax实现前后台数据交互的方法。

17.jQuery-前后台数据交互

知识点

• jQuery 是目前最受欢迎的 JavaScript 框架。
• 它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
• 操作页面元素

运用例子

• 获取值

  
  
     
         
         
        
        
        
        
    
    	
        
  这是段落中的 粗体 文本。
        显示文本
        显示 HTML
        
  
  
        
  名称: 
        显示值
        
  
  
        
  这是测试属性值
        显示divDemo1的width属性值
        
  
  
        
  这是测试属性值
        显示background-color属性值
  
    
  
  
  

• 设置值

     
         
         
        
        
        
    
    	
        

        设定p的文本
        设定p的 HTML
        


        
名称: 
        设定input值
        
  
        

           
        img设定值src属性值
        

        
这是测试属性值
        

        
这是测试属性值
        设定值background-color属性值

    

• ajax 前后台数据交互
• $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
  • 语法：
    • $.get(URL,callback); 或者 $.get(url, params, callback)
    • 案例1：

      $.get("test.aspx", function(data){
             // 弹出提示
              alert("这是后台返回的数据: " + data);
             } 
           )
      

    • 案例2：

      // 这是要往后台传递的数据
      var params ="{name:"young", age:"15"}";  
      $.get("ajax.asp", 
              params, 
              function(data){ 
              alert("这是后台返回的数据: " + data);
               } 
          )
      

    • 案例3：

      // 序列表单内容为字符串，用于 Ajax 请求 
      var params =$("form").serialize();
      $.get("ajax.asp", 
              params, 
              function(data){ 
              alert("这是后台返回的数据: " + data);
               } 
          )
      

• $.post() 方法通过 HTTP POST 请求向服务器提交数据。
  • 语法：
    • $.post(URL,callback); 或 $.post( URL [, data ] [, callback ] [, dataType ] )
    • 案例1：

      $.post("test.aspx", function(data){
              alert("这是后台返回的数据: " + data);
              } 
            )      
      

    • 案例2：

      var params ="{name:"young", age:"15"}"; 
          $.post("test.aspx",params,
          function(data){
          alert("这是后台返回的数据: \n " + data);
          }
      

    • 案例3：

      var params ="{name:"young", age:"15"}"; 
          $.post("test.aspx",params,
          function(data,status){
          alert("这是后台返回的数据: \n" + data + "\n状态: " + status);
          }		
      

jQuery更详细的知识点和案例代码的实现将在《jQuery框架案例训练》课程里讲解，敬请期待。

Web前端速成(Html+Css+JavaScript+jQuery)

1. 前言
2. 初识HTML
3. 基本标签
4. 属性
5. 文本格式化
6. 链接
7. 图片(Images)
8. 分组
9. 无序列表
10. 有序列表
11. 自定义列表
12. 表格(Tables)
13. CSS
14. 页面布局
15. 表单(Forms)
16. 认识JavaScript
17. jQuery-前后台数据交互
18. 知识总结与就业指导