오늘은 jquery와 ajax_jquery에 대한 관련 지식을 정리하는 시간을 갖도록 하겠습니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

오늘은 jquery와 ajax_jquery에 대한 관련 지식을 정리하는 시간을 갖도록 하겠습니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:31 PM

안녕하세요 오늘은 화요일인데 어떡하지? 지난 이틀 동안 ajax 관련 지식을 배웠던 기억이 나네요. 오늘도 jquery와 ajax 관련 지식을 배워보겠습니다.

1. jQuery

------jQuery 및 AJAX------

AJAX는 "Asynchronous Javascript And XML"의 약자로 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다.

AJAX = 비동기 JavaScript 및 XML(표준 범용 마크업 언어의 하위 집합).

AJAX는 빠르고 동적인 웹페이지를 만드는 기술입니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

----load() 메소드를 사용하여 비동기식으로 데이터 요청

load() 메서드를 사용하여 Ajax 요청을 통해 서버에서 데이터를 로드하고 반환된 데이터를 지정된 요소에 배치합니다.

로드(URL,[데이터],[콜백])

url 매개변수는 로딩 서버의 주소, 선택적 data 매개변수는 요청 시 전송되는 데이터, callback 매개변수는 데이터 요청 성공 후 실행되는 콜백 함수입니다.

<body>
<div id="divtest">
<div class="title">
<span class="fl">我最爱吃的水果</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load("http://www.imooc.com/data/fruit_part.html",function(){
$this.attr("disabled", "true");
});
})
});
</script>
</body>

로그인 후 복사

load()를 사용할 때 요소는 공백에 민감합니다. 예를 들어 URL의 시작과 끝에 공백이 없어야 합니다. 예를 들어 function() 뒤에는 공백이 없어야 합니다. .

----JSON 형식 데이터를 비동기적으로 로드하려면 getJSON() 메서드를 사용하세요

Ajax 비동기 요청을 통해 서버에서 배열을 가져오고 가져온 데이터를 구문 분석하고 페이지에 표시하려면 getJSON() 메서드를 사용하세요.

jQuery.getJSON(url,[data],[콜백]) 또는 $.getJSON(url,[data],[callback])

그 중 url 매개변수는 json 형식의 파일을 로드하기 위한 요청의 서버 주소, 선택적 data 매개변수는 요청 시 전송되는 데이터, callback 매개변수는 데이터 요청 성공 후 실행되는 콜백 함수입니다. .

<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的一项运动</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
</body>

로그인 후 복사

----getScript() 메소드를 사용하여 js 파일을 비동기적으로 로드하고 실행합니다.

서버에서 JavaScript 형식의 파일을 비동기적으로 요청하고 실행하려면 getScript() 메서드를 사용하세요.

jQuery.getScript(url,[콜백]) 또는 $.getScript(url,[콜백])

url 매개변수는 서버 요청 주소이고, 선택적 callback 매개변수는 요청 성공 후 실행되는 콜백 함수입니다.

<body>
<div id="divtest">
<div class="title">
<span class="fl">我最喜欢的运动</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getScript("http://www.imooc.com/data/sport_f.js",function(){
$this.attr("disabled", "true");
});
})
});
</script>
</body>

로그인 후 복사

----GET 모드에서 서버로부터 데이터를 얻으려면 get() 메서드를 사용하세요.

get() 메소드를 사용할 때 GET 메소드를 사용하여 서버에 데이터를 요청하며, 요청된 데이터는 해당 메소드의 콜백 함수의 매개변수를 통해 반환됩니다.

$.get(url,[콜백])

url 매개변수는 서버 요청 주소이고, 선택적 callback 매개변수는 요청 성공 후 실행되는 콜백 함수입니다.

<body>
<div id="divtest">
<div class="title">
<span class="fl">我的个人资料</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get("http://www.imooc.com/data/info_f.php",function(data){
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友对我说：" + data.say + "</li>");
}, "json");
})
});
</script>
</body>

로그인 후 복사

----post() 메소드를 사용하여 서버에서 데이터를 POST하세요

get() 메소드에 비해 post() 메소드는 POST 모드로 서버에 데이터를 전송하는 데 주로 사용됩니다. 서버는 데이터를 수신한 후 이를 처리하고 처리 결과를 페이지에 반환합니다. 형식은 다음과 같습니다.

$.post(url,[데이터],[콜백])

url 매개변수는 서버 요청 주소, 선택적 data는 서버에 요청할 때 전송되는 데이터, 선택적 callback 매개변수는 요청 성공 후 실행되는 콜백 함수입니다.

<body>
<div id="divtest">
<div class="title">
<span class="fl">检测数字是否大于0</span> 
<span class="fr"><input id="btnCheck" type="button" value="检测" /></span>
</div>
<ul>
<li>请求输入一个数字 <input id="txtNumber" type="text" size="12" /></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.post("http://www.imooc.com/data/check_f.php",{
num:$("#txtNumber").val()
},
function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
});
})
});
</script>
</body>

로그인 후 복사

여기서 val()은 jQuery의 함수인 이전 선택자의 값을 가져오기 위한 것입니다

----serialize() 메서드를 사용하여 양식 요소 값을 직렬화합니다

serialize() 메소드를 사용하여 양식의 name 속성으로 요소 값을 직렬화하고 Ajax 요청에 직접 사용할 수 있는 표준 URL 인코딩 텍스트 문자열을 생성합니다.

$(selector).serialize()

선택기 매개변수는 양식에 있는 하나 이상의 요소 또는 양식 요소 자체입니다.

<body>
<div id="divtest">
<div class="title">
<span class="fl">我的个人资料</span> 
<span class="fr">
<input id="btnAction" type="button" value="序列化" />
</span>
</div>
<form action="">
<ul>
<li>姓名：<input name="Text1" type="text" size="12" /></li>
<li>
<select name="Select1">
<option value="0">男</option>
<option value="1">女</option>
</select>
</li>
<li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
<li id="litest"></li>
</ul>
</form>
</div>
<script type="text/javascript">
$(function () {
$("#btnAction").bind("click", function () {
$("#litest").html($("form").serialize());
})
})
</script>
</body>

로그인 후 복사

----ajax() 메소드를 사용하여 서버 데이터 로드

ajax() 메소드를 사용하는 것은 서버 데이터를 요청하는 가장 낮고 강력한 방법입니다. 서버에서 반환된 데이터를 얻을 수 있을 뿐만 아니라 서버에 요청을 보내고 값을 전달합니다. :

jQuery.ajax([설정]) 또는 $.ajax([설정])

매개변수 설정은 ajax 요청을 보낼 때의 구성 개체입니다. 이 개체에서 url은 서버가 요청한 경로를 나타내고, data는 요청 중에 전달된 데이터, dataType은 서버가 반환한 데이터 유형, 성공을 나타냅니다. 콜백 함수의 성공적인 실행, 유형은 데이터 요청 전송 방법, 기본값은 가져오기입니다.

<body>
<div id="divtest">
<div class="title">
<span class="fl">检测数字的奇偶性</span> 
<span class="fr">
<input id="btnCheck" type="button" value="检测" />
</span>
</div>
<ul>
<li>请求输入一个数字 
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type:"post",
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
</body>

로그인 후 복사

----使用ajaxSetup()方法设置全局Ajax默认选项

使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：

jQuery.ajaxSetup([options])或$.ajaxSetup([options])

可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。

<body>
<div id="divtest">
<div class="title">
<span class="fl">奇偶性和是否大于0</span> 
<span class="fr">
<input id="btnShow_1" type="button" value="验证1" />
<input id="btnShow_2" type="button" value="验证2" />
</span>
</div>
<ul>
<li>请求输入一个数字 
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$.ajaxSetup({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type:"post",
success:function(data){$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
</body>

로그인 후 복사

----使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

<body>
<div id="divtest">
<div class="title">
<span class="fl">加载一段文字</span> 
<span class="fr">
<input id="btnShow" type="button" value="加载" />
</span>
</div>
<ul>
<li id="divload"></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#divtest").ajaxStart(function(){
$(this).html("正在请求数据...");
});
$("#divtest").ajaxStop(function(){
$(this).html("数据请求完成！");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://www.imooc.com/data/info_f.php",
dataType: "json",
success: function (data) {
$this.attr("disabled", "true");
$("ul").append("<li>我的名字叫：" + data.name + "</li>");
$("ul").append("<li>男朋友对我说：" + data.say + "</li>");
}
});
})
});
</script>
</body>

로그인 후 복사

-----jQuery常用插件-----

----表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：

$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

<body>
<form id="frmV" method="get" action="#">
<div id="divtest">
<div class="title">
<span class="fl">表单验证插件</span> 
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">邮箱：</span><br />
<input id="email" name="email" type="text" /><br />
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
email:{
required:true,
email:true
}
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
</body>
</html>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7530

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? Mar 18, 2025 pm 03:17 PM

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까? Apr 04, 2025 pm 05:12 PM

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...

초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형 Mar 19, 2025 am 09:10 AM

엔트리 레벨 타입 스크립트 자습서를 마스터 한 후에는 TypeScript를 지원하고 JavaScript로 컴파일하는 IDE에서 자신의 코드를 작성할 수 있어야합니다. 이 튜토리얼은 TypeScript의 다양한 데이터 유형으로 뛰어납니다. JavaScript에는 NULL, UNDEFINED, BOOLEAN, 번호, 문자열, 기호 (ES6에 의해 소개 됨) 및 객체의 7 가지 데이터 유형이 있습니다. TypeScript는이 기반으로 더 많은 유형을 정의 하며이 튜토리얼은이 모든 튜토리얼을 자세히 다룹니다. 널 데이터 유형 JavaScript와 마찬가지로 Null in TypeScript

See all articles

오늘은 jquery와 ajax_jquery에 대한 관련 지식을 정리하는 시간을 갖도록 하겠습니다.

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제