jquery中ajax学习笔记一

针对jQuery中ajax学习笔记一的完整攻略，以下是详细的讲解：

什么是ajax

Ajax（Asynchronous JavaScript and XML，异步的JavaScript和XML技术）是一种用于创建交互式Web应用程序的技术，通过在不需要重新加载整个页面的情况下，更新部分页面内容来提高网页的效率。Ajax使用的JavaScript功能使得在向服务器请求数据时，页面不会被阻塞，从而来提升用户体验度。

JQuery是一个轻量级JavaScript开发框架，可以通过它来实现AJAX请求。下面我们来介绍一下使用jQuery中进行Ajax交互的方法。

jQuery ajax 方法

jQuery ajax方法是用于异步请求（以及同步请求）数据的JavaScript功能，并且可以在不刷新整个页面的情况下更新页面内容。

基本的jQuery ajax方法格式如下：

$.ajax({
  url: "demo.html",//请求的URL地址
  success: function(result){//请求成功后执行的操作
    //函数内容
  },
  error: function(XMLHttpRequest, textStatus, errorThrown){//请求失败时执行的内容
    //函数内容
  }
});

该方法的参数可以有很多，但是其中最重要的参数是URL和success回调函数，其中：

• URL指要请求的服务器地址。
• success回调函数将会在请求成功时执行。

例1：向服务器请求数据并更新页面内容的例子

<button id="btn" onclick="getData()">点击获取数据</button>

<script type="text/javascript">
function getData() {
  $.ajax({
    url: "data.json",
    success: function(result) {
      $('#result').html(result);
    },
    error: function() {
      console.log("请求出错");
    }
  });
}
</script>

<div id="result"></div>

该例中，当我们点击按钮时，将会向服务器发送一个数据请求。如果请求成功，将会使用jQuery的html()方法更新页面上id=“result”元素的内容，从而在页面上呈现JSON格式的数据。

例2：我们还能通过设置data属性来向服务器传递数据

<button id="btn" onclick="getData()">点击获取数据</button>

<script type="text/javascript">
function getData() {
  $.ajax({
    url: "data.php",
    data: {name:"Sam", age:18},//传递的参数
    success: function(result) {
      $('#result').html(result);
    },
    error: function() {
      console.log("请求出错");
    }
  });
}
</script>

<div id="result"></div>

在这个例子中，我们依然是通过点击按钮向服务器发送了一个数据请求，但是这次我们通过使用data属性将数据作为参数传递给了服务器。

这就是jQuery中ajax学习笔记一的完整攻略，以及两个示例说明。希望能够帮助到你。