$.ajax()方法詳解及例項 

1.url:

案例程式碼

<span style="font-size:14px;">$(function(){
    $('#send').click(function(){
         $.ajax({
             type: "GET",
             url: "test.json",
             data: {username:$("#username").val(), content:$("#content").val()},
             dataType: "json",
             success: function(data){
                         $('#resText').empty(); //清空resText裡面的所有內容 var html = ''; 
                         $.each(data, function(commentIndex, comment){
                               html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>';
                         });
                         $('#resText').html(html);
                      }
         });
    });
});</span>

例：當點選a標籤的時候顯示對應的下面內容， 通過ajax實現。

<span style="font-size:14px;"><script type="text/javascript">
jQuery('.yd_content').load('yuding_tab0.html');
jQuery.ajax({
  url:"yuding_tab0.html",
  type:'get',
  data:{},
  dataType:"html",
  success: function(data){
   jQuery('.yd_content').html(data);
   },
  error: function(){
   alert('error');
   }
});
<script>

<script type="text/javascript">
jQuery('.jiudian_content .tab li').bind('click',
 function(){
 var _index=jQuery(this).index();
  jQuery.ajax({
    url:"yuding_tab"+_index+".html",
    type:'get',
    data:{},
    dataType:"html",
    success: function(data){
    jQuery('.yd_content').html(data);
    yuding();
    },
    error: function(){
    alert('error');
    }
    });
 })

</script></span>

根據選擇的線路動態的獲取所線上路的車型

<span style="background-color: rgb(255, 255, 255);"><span style="font-size:18px;"><%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../taglibs.jsp"%>
<%@ taglib prefix="jvform" tagdir="/WEB-INF/tags/form" %>
<%@ taglib prefix="jvnav" tagdir="/WEB-INF/tags/nav" %>
<%@ taglib prefix="jvlayout" tagdir="/WEB-INF/tags/layout" %>
<%@ taglib prefix="jvmessage" tagdir="/WEB-INF/tags/message" %>
<%@ taglib prefix="jvtable" tagdir="/WEB-INF/tags/table" %>
<%@ taglib prefix="jvpagetable" tagdir="/WEB-INF/tags/pagetable"%>
<%@ taglib prefix="jvdialog" tagdir="/WEB-INF/tags/dialog"%>

<jvnav:breadcrumb id="breadcrumb">
	<jvnav:breadcrumbitem title="電動列車檢修計劃調整管理" url="/vehicleCheck" active="true"
		icon="icon-home" />
	<jvnav:breadcrumbitem title="編輯電動列車檢修計劃" active="false" />
</jvnav:breadcrumb>
<jvlayout:page>
	<h3 class="col-xs-12 header smaller lighter blue">
		<span class="col-xs-12 col-sm-7">編輯電動列車檢修計劃</span> <span
			class="col-xs-12 col-sm-5"><button
				class="btn btn-xs btn-primary" style="width: 100px"
				onclick="history.back()">返回列表</button>
		</span>
	</h3>
	<jvlayout:row>
		<jvlayout:col length="12">
			<!-- PAGE CONTENT BEGINS -->
			<jvform:form id="vehicleCheckform" action="/vehicleCheck/save" method="post">
				<jvform:hidden id="id" value="${check.id}"></jvform:hidden>
				<jvform:textfield id="orderNumber" title="工單號" value="${check.orderNumber}"></jvform:textfield>
				<jvform:select id="type" required="true" title="流程型別" options="${typeList}" optionsType="2" value="${check.type}" selectType="1"></jvform:select>
				
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">
						線路
					</label>
					<div class="col-sm-9">
						<select class="col-xs-10 col-sm-5" id="lineId" name="lineId" onchange="selectCarType(this.value);">
							<c:forEach items="${lineList}" var="line">
								<c:choose>
									<c:when test="${line.id eq check.lineId}">
										<option value="${line.id}" selected="selected">${line.name}</option>
									</c:when>
									<c:otherwise>
										<option value="${line.id}">${line.name}</option>		
									</c:otherwise>
								</c:choose>
							</c:forEach>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">
						車型
					</label>
					<div class="col-sm-9">
						<input id="type" value="${check.carTypeId}" type="hidden">
						<select class="col-xs-10 col-sm-5" id="carTypeId" name="carTypeId" >
						</select>
					</div>
				</div>
				
				<jvform:textfield id="carNo" title="車號" required="ture" value="${check.carNo}"></jvform:textfield>
				<jvform:textfield id="name" title="修程名稱" required="ture" value="${check.name}"></jvform:textfield>
				<jvform:select required="true" id="type2" title="型別" options="${typeList2}" optionsType="2" value="${check.type2}"></jvform:select>
				
				<jvform:textfield id="workNo" title="工作令號" required="ture" value="${check.workNo}"></jvform:textfield>
				<jvform:datefield id="planStartDate" title="原計劃開始時間" required="ture" value="${check.planStartDate}"></jvform:datefield>
				<jvform:datefield id="planEndDate" title="原計劃結束時間" required="ture" value="${check.planEndDate}"></jvform:datefield>
				<jvform:datefield id="realStartDate" title="現調整開始時間" value="${check.realStartDate}"></jvform:datefield>
				<jvform:datefield id="realEndDate" title="現調整結束時間" value="${check.realEndDate}"></jvform:datefield>
				<jvform:textareafield id="reason" title="計劃調整事由" required="ture" value="${check.reason}"></jvform:textareafield>
			</jvform:form>
		</jvlayout:col>
	</jvlayout:row>
	<!-- /row -->
</jvlayout:page>
<!-- /.page-content -->
<script type="text/javascript">
$(function(){ 
	selectCarType($("#lineId").val());
}); 
function selectCarType(lineId) {
	var parm = [];
	$("#carTypeId").empty();
	parm.push( {"name": "lineId", "value": lineId});
	$.ajax({
		"type" : "POST",
		"contentType" : "application/json",
		"url" : '<c:url value="/line/findVehicleTypeByLineId"/>',
		"dataType" : "json", 
		"data" : JSON.stringify(parm), //以json格式傳遞
		"success" : function(resp) {
			var content = '';
			content += '<option value="0">--請選擇--</option>';
			$.each(resp.content, function(i, item) {
				if (item.id == $("#type").val()) {
					content += '<option value="'+item.id+'" selected="selected">'+item.newNum+'</option>';
				} else {
					content += '<option value="'+item.id+'">'+item.newNum+'</option>';
				}
			});
			$("#carTypeId").append(content);
		}
	});
}
</script></span></span>