jQuery中ajax的使用

1.jQuery中ajax的使用

$.ajax({
  type: 请求的方式，
  url: 要发送的目标地址,
  data:要发送的数据，支持两种形式，一个是对象的方式，一个是拼接好的字符串，
  dataType:将返回的数据类型以什么方式来接收处理,
  success:成功后的回调,
  timeout:设置超时时间,
  error:错误时的回调,如果有错误就会执行这个函数中的代码，而不会执行success里面的代码，
  beforeSend:请求发送之前要执行的函数，是在send之前来执行，可以用来做一些校验，
  complate:无论是成功还是失败，最好都会执行，一般多用于做一些数据的重置
})

$.get()

$.post()

url: 必写的   表示要发送的目标地址data:可选的   表示要发送的数据success: 可选的  发送请求成功后的回调dataType: 可选的  表示以什么样的方式来处理响应回来的数据

$('form').serialize():

• 此方法可以一次性将form标签中具有name属性的input或select标签的值获取，并拼接成'键=值&键=值'的数据格式。

2.art-template模板引擎

为什么要使用模板引擎：

• 1.原始的拼接字符串的方式太麻烦，不利于将来的更新或维护

• 2.如果有业务逻辑的判断，原来的方式不好实现

基本使用步骤：

1. 引入模板文件

2. 准备模板

3. 调用方法template 生成模板字符串

4. 渲染页面

1.原始语法的使用

如果页面中只显示一个对象中的数据，则模板可以写成如下：

<script type="text/template" id="listTmp">
      <tr>
        <td><%= id %></td>
        <td><%= name %></td>
        <td><%= gender%></td>
        <td><%= age%></td>
        <td><%= zhuanye%></td>
        <td><%= address%></td>
      </tr>
 </script>

如果要在页面中渲染多条数据，这些数据是在对象的data属性中，data是一个数组，则模板可以写成如下形式:

<script type="text/template" id="listTmp">
    <% for(var i=0;i<data.length;i++){%>
       <tr>
        <td><%= data[i].id %></td>
        <td><%= data[i].name %></td>
        <td><%= data[i].gender%></td>
        <td><%= data[i].age%></td>
        <td><%= data[i].zhuanye%></td>
        <td><%= data[i].address%></td>
      </tr>
     <%}%>
 </script>

如果在这数据当中，有判断的话，则写法如下:

<script type="text/template" id="listTmp">
    <% for(var i=0;i<data.length;i++){%>
       <tr>
        <td><%= data[i].id %></td>
        <td><%= data[i].name %></td>
        <% if(data[i].gender=='男'){%>
          <td>靓仔</td>
          <%}else {%>
          <td>美女</td>
         <%}%>
        
        <td><%= data[i].age%></td>
        <td><%= data[i].zhuanye%></td>
        <td><%= data[i].address%></td>
      </tr>
     <%}%>
 </script>

2.模板引擎简洁语法的使用

如果只渲染一个对象的数据，则使用下面的模板

 <script type="text/template" id="listTmp">
      <tr>
        <td>{{id}}</td>
        <td>{{name}}</td>
        <td>{{gender}}</td>
        <td>{{age}}</td>
        <td>{{zhuanye}}</td>
        <td>{{address5}}</td>
      </tr>
 </script>

如果有多个对象要渲染，则写法哪下:

 <script type="text/template" id="listTmp">
    {{each data as val key}}
      <tr>
        <td>{{val.id}}</td>
        <td>{{val.name}}</td>
        <td>{{val.gender}}</td>
        <td>{{val.age}}</td>
        <td>{{val.zhuanye}}</td>
        <td>{{val.address}}</td>
      </tr>
    {{/each}}
 </script>
      
// 如果不写as  val  key的话，则会有一个默认的key和value叫  $value,$index

如果不写as val key的话，则会有默认的$value 和$index

<script type="text/template" id="listTmp">
    {{each data}}
      <tr>
        <td>{{$value.id}}</td>
        <td>{{$value.name}}</td>
        <td>{{$value.gender}}</td>
        <td>{{$value.age}}</td>
        <td>{{$value.zhuanye}}</td>
        <td>{{$value.address}}</td>
      </tr>
    {{/each}}
 </script>

如果有判断的话，则写法如下：

<script type="text/template" id="listTmp">
    {{each data}}
      <tr>
        <td>{{$value.id}}</td>
        <td>{{$value.name}}</td>
        {{ if $value.gender=='男'}}
        <td>靓仔</td>
        {{ else }}
        <td>美女</td>
        {{/if}}
        <td>{{$value.age}}</td>
        <td>{{$value.zhuanye}}</td>
        <td>{{$value.address}}</td>
      </tr>
    {{/each}}
 </script>