|
|
| 关键字 |
简介 |
示例代码 |
|
$.ajax()
|
提交AJAX请求
|
示例代码
|
|
$.get()
|
使用get方式提交ajax
|
示例代码
|
|
$.post
|
使用post方式提交ajax
|
示例代码
|
|
load()
|
最简单的调用ajax的方式
|
示例代码
|
|
serialize()
|
格式化form下的输入数据
|
示例代码
|
示例
1
:
提交AJAX请求
示例
2
:
使用get方式提交ajax
示例
3
:
使用post方式提交ajax
示例
4
:
最简单的调用ajax的方式
示例
5
:
格式化form下的输入数据
参考 使用AJAX 通过无刷新验证账号是否存在 这个例子,服务端使用 JSP进行验证，当用户输入 abc的时候提示"已经存在" 完整的 $.ajax 参数 比较复杂，这里采用了常见的调用方式。
$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result);
}
});
$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开 第一个参数 url:page 表示访问的是page页面 第二个参数 data:{name:value} 表示提交的参数 第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数
");
window.frames["iframe_show1002"].document.write(decodeHtml($("textarea#stepcodeTextarea1002").val()));
window.frames["iframe_show1002"].document.close();
$(window.frames["iframe_show1002"]).load(function(){
$("#iframe_show1002").height($("#iframe_show1002").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1002").height($("#iframe_show1002").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result);
}
});
});
});
</script>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result);
}
});
});
});
</script>
");
window.frames["iframe1002"].document.write(decodeHtml(code1002));
window.frames["iframe1002"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1002"]).load(function(){
$("#iframe1002").height($("#iframe1002").contents().find("body").height()+showittryitheight);
});
$("#iframe1002").height($("#iframe1002").contents().find("body").height()+showittryitheight);
alreadyWriteCode1002 = code1002;
$("#rendering1002").hide();
$("#rendered1002").show();
}
var tRereshRetry2DemoPanel1002 = setInterval(rereshRetry2DemoPanel1002,1000);
var binded1002 = false;
$("textarea#stepcodeTextarea1002").keyup(function(){
if(!binded1002){
$(window).bind('beforeunload',function(){
binded1002 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1002 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1002!=newCode){
// window.frames["iframe1002"].document.write("
");
// window.frames["iframe1002"].document.write(decodeHtml($("textarea#stepcodeTextarea1002").val()));
// window.frames["iframe1002"].document.close();
// $(window.frames["iframe1002"]).load(function(){
// $("#iframe1002").height($("#iframe1002").contents().find("body").height()+showittryitheight);
// });
// code1002 = newCode;
// }
});
$(".tryButton1002").click(function(){
$("#tryDiv1002").show();
$("#stepcodeTextarea1002").focus();
$("#stepcodeTextarea1002").height(200);
$("#iframe1002").height(0);
window.frames["iframe1002"].document.write("
");
window.frames["iframe1002"].document.write(decodeHtml($("textarea#stepcodeTextarea1002").val()));
window.frames["iframe1002"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1002"]).load(function(){
$("#iframe1002").height($("#iframe1002").contents().find("body").height()+showittryitheight);
});
$("#iframe1002").height($("#iframe1002").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1002.focus();
editor1002.setSize(null, "250");
$("#rendering1002").hide();
$("#rendered1002").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1002 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1002"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1002.on("change",function(doc){
if(!binded1002){
$(window).bind('beforeunload',function(){
binded1002 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1002 = newCode;
$("textarea#stepcodeTextarea1002").val(newCode);
if(alreadyWriteCode1002!=code1002){
lastModifedTime1002 = new Date().getTime();
$("#rendering1002").show();
$("#rendered1002").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1002 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1002.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1002").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
$.get 是 $.ajax的简化版，专门用于发送 GET请求
$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
$.get 使用3个参数 第一个参数: page 访问的页面 第二个参数: {name:value} 提交的数据 第三个参数: function(){} 响应函数 只有 第一个参数是 必须的，其他参数都是可选
");
window.frames["iframe_show999"].document.write(decodeHtml($("textarea#stepcodeTextarea999").val()));
window.frames["iframe_show999"].document.close();
$(window.frames["iframe_show999"]).load(function(){
$("#iframe_show999").height($("#iframe_show999").contents().find("body").height()+showittryitheight);
});
$("#iframe_show999").height($("#iframe_show999").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
});
});
</script>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
});
});
</script>
");
window.frames["iframe999"].document.write(decodeHtml(code999));
window.frames["iframe999"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe999"]).load(function(){
$("#iframe999").height($("#iframe999").contents().find("body").height()+showittryitheight);
});
$("#iframe999").height($("#iframe999").contents().find("body").height()+showittryitheight);
alreadyWriteCode999 = code999;
$("#rendering999").hide();
$("#rendered999").show();
}
var tRereshRetry2DemoPanel999 = setInterval(rereshRetry2DemoPanel999,1000);
var binded999 = false;
$("textarea#stepcodeTextarea999").keyup(function(){
if(!binded999){
$(window).bind('beforeunload',function(){
binded999 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code999 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code999!=newCode){
// window.frames["iframe999"].document.write("
");
// window.frames["iframe999"].document.write(decodeHtml($("textarea#stepcodeTextarea999").val()));
// window.frames["iframe999"].document.close();
// $(window.frames["iframe999"]).load(function(){
// $("#iframe999").height($("#iframe999").contents().find("body").height()+showittryitheight);
// });
// code999 = newCode;
// }
});
$(".tryButton999").click(function(){
$("#tryDiv999").show();
$("#stepcodeTextarea999").focus();
$("#stepcodeTextarea999").height(200);
$("#iframe999").height(0);
window.frames["iframe999"].document.write("
");
window.frames["iframe999"].document.write(decodeHtml($("textarea#stepcodeTextarea999").val()));
window.frames["iframe999"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe999"]).load(function(){
$("#iframe999").height($("#iframe999").contents().find("body").height()+showittryitheight);
});
$("#iframe999").height($("#iframe999").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor999.focus();
editor999.setSize(null, "250");
$("#rendering999").hide();
$("#rendered999").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor999 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea999"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor999.on("change",function(doc){
if(!binded999){
$(window).bind('beforeunload',function(){
binded999 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code999 = newCode;
$("textarea#stepcodeTextarea999").val(newCode);
if(alreadyWriteCode999!=code999){
lastModifedTime999 = new Date().getTime();
$("#rendering999").show();
$("#rendered999").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor999 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor999.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv999").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
示例
3
:
使用post方式提交ajax
顶
折
$.post 是 $.ajax的简化版，专门用于发送 POST请求
$.post(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
$.post 使用3个参数 第一个参数: page 访问的页面 第二个参数: {name:value} 提交的数据 第三个参数: function(){} 响应函数 只有 第一个参数是 必须的，其他参数都是可选 参考 method="get" 与 method="post"的区别
");
window.frames["iframe_show1000"].document.write(decodeHtml($("textarea#stepcodeTextarea1000").val()));
window.frames["iframe_show1000"].document.close();
$(window.frames["iframe_show1000"]).load(function(){
$("#iframe_show1000").height($("#iframe_show1000").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1000").height($("#iframe_show1000").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.post(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
});
});
</script>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var page = "/study/checkName.jsp";
var value = $(this).val();
$.post(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
});
});
</script>
");
window.frames["iframe1000"].document.write(decodeHtml(code1000));
window.frames["iframe1000"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1000"]).load(function(){
$("#iframe1000").height($("#iframe1000").contents().find("body").height()+showittryitheight);
});
$("#iframe1000").height($("#iframe1000").contents().find("body").height()+showittryitheight);
alreadyWriteCode1000 = code1000;
$("#rendering1000").hide();
$("#rendered1000").show();
}
var tRereshRetry2DemoPanel1000 = setInterval(rereshRetry2DemoPanel1000,1000);
var binded1000 = false;
$("textarea#stepcodeTextarea1000").keyup(function(){
if(!binded1000){
$(window).bind('beforeunload',function(){
binded1000 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1000 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1000!=newCode){
// window.frames["iframe1000"].document.write("
");
// window.frames["iframe1000"].document.write(decodeHtml($("textarea#stepcodeTextarea1000").val()));
// window.frames["iframe1000"].document.close();
// $(window.frames["iframe1000"]).load(function(){
// $("#iframe1000").height($("#iframe1000").contents().find("body").height()+showittryitheight);
// });
// code1000 = newCode;
// }
});
$(".tryButton1000").click(function(){
$("#tryDiv1000").show();
$("#stepcodeTextarea1000").focus();
$("#stepcodeTextarea1000").height(200);
$("#iframe1000").height(0);
window.frames["iframe1000"].document.write("
");
window.frames["iframe1000"].document.write(decodeHtml($("textarea#stepcodeTextarea1000").val()));
window.frames["iframe1000"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1000"]).load(function(){
$("#iframe1000").height($("#iframe1000").contents().find("body").height()+showittryitheight);
});
$("#iframe1000").height($("#iframe1000").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1000.focus();
editor1000.setSize(null, "250");
$("#rendering1000").hide();
$("#rendered1000").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1000 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1000"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1000.on("change",function(doc){
if(!binded1000){
$(window).bind('beforeunload',function(){
binded1000 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1000 = newCode;
$("textarea#stepcodeTextarea1000").val(newCode);
if(alreadyWriteCode1000!=code1000){
lastModifedTime1000 = new Date().getTime();
$("#rendering1000").show();
$("#rendered1000").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1000 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1000.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1000").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
load比起 $.get, $.post 就更简单了
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表
");
window.frames["iframe_show1001"].document.write(decodeHtml($("textarea#stepcodeTextarea1001").val()));
window.frames["iframe_show1001"].document.close();
$(window.frames["iframe_show1001"]).load(function(){
$("#iframe_show1001").height($("#iframe_show1001").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1001").height($("#iframe_show1001").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var value = $(this).val();
var page = "/study/checkName.jsp?name="+value;
$("#checkResult").load(page);
});
});
</script>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
输入账号 :<input id="name" type="text">
<script>
$(function(){
$("#name").keyup(function(){
var value = $(this).val();
var page = "/study/checkName.jsp?name="+value;
$("#checkResult").load(page);
});
});
</script>
");
window.frames["iframe1001"].document.write(decodeHtml(code1001));
window.frames["iframe1001"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1001"]).load(function(){
$("#iframe1001").height($("#iframe1001").contents().find("body").height()+showittryitheight);
});
$("#iframe1001").height($("#iframe1001").contents().find("body").height()+showittryitheight);
alreadyWriteCode1001 = code1001;
$("#rendering1001").hide();
$("#rendered1001").show();
}
var tRereshRetry2DemoPanel1001 = setInterval(rereshRetry2DemoPanel1001,1000);
var binded1001 = false;
$("textarea#stepcodeTextarea1001").keyup(function(){
if(!binded1001){
$(window).bind('beforeunload',function(){
binded1001 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1001 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1001!=newCode){
// window.frames["iframe1001"].document.write("
");
// window.frames["iframe1001"].document.write(decodeHtml($("textarea#stepcodeTextarea1001").val()));
// window.frames["iframe1001"].document.close();
// $(window.frames["iframe1001"]).load(function(){
// $("#iframe1001").height($("#iframe1001").contents().find("body").height()+showittryitheight);
// });
// code1001 = newCode;
// }
});
$(".tryButton1001").click(function(){
$("#tryDiv1001").show();
$("#stepcodeTextarea1001").focus();
$("#stepcodeTextarea1001").height(200);
$("#iframe1001").height(0);
window.frames["iframe1001"].document.write("
");
window.frames["iframe1001"].document.write(decodeHtml($("textarea#stepcodeTextarea1001").val()));
window.frames["iframe1001"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1001"]).load(function(){
$("#iframe1001").height($("#iframe1001").contents().find("body").height()+showittryitheight);
});
$("#iframe1001").height($("#iframe1001").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1001.focus();
editor1001.setSize(null, "250");
$("#rendering1001").hide();
$("#rendered1001").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1001 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1001"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1001.on("change",function(doc){
if(!binded1001){
$(window).bind('beforeunload',function(){
binded1001 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1001 = newCode;
$("textarea#stepcodeTextarea1001").val(newCode);
if(alreadyWriteCode1001!=code1001){
lastModifedTime1001 = new Date().getTime();
$("#rendering1001").show();
$("#rendered1001").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1001 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1001.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1001").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
serialize()： 格式化form下的输入数据
有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串
");
window.frames["iframe_show1251"].document.write(decodeHtml($("textarea#stepcodeTextarea1251").val()));
window.frames["iframe_show1251"].document.close();
$(window.frames["iframe_show1251"]).load(function(){
$("#iframe_show1251").height($("#iframe_show1251").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1251").height($("#iframe_show1251").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
<div id="data"></div>
<a href="http://127.0.0.1/study/checkName.jsp">http://127.0.0.1/study/checkName.jsp</a>
<form id="form">
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
</form>
<script>
$(function(){
$("input").keyup(function(){
var data = $("#form").serialize();
var url = "http://127.0.0.1/study/checkName.jsp";
var link = url+"?"+ data;
$("a").html(link);
$("a").attr("href",link);
});
});
</script>
<script src="http://127.0.0.1/study/jquery.min.js"></script>
<div id="checkResult"></div>
<div id="data"></div>
<a href="http://127.0.0.1/study/checkName.jsp">http://127.0.0.1/study/checkName.jsp</a>
<form id="form">
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
</form>
<script>
$(function(){
$("input").keyup(function(){
var data = $("#form").serialize();
var url = "http://127.0.0.1/study/checkName.jsp";
var link = url+"?"+ data;
$("a").html(link);
$("a").attr("href",link);
});
});
</script>
");
window.frames["iframe1251"].document.write(decodeHtml(code1251));
window.frames["iframe1251"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1251"]).load(function(){
$("#iframe1251").height($("#iframe1251").contents().find("body").height()+showittryitheight);
});
$("#iframe1251").height($("#iframe1251").contents().find("body").height()+showittryitheight);
alreadyWriteCode1251 = code1251;
$("#rendering1251").hide();
$("#rendered1251").show();
}
var tRereshRetry2DemoPanel1251 = setInterval(rereshRetry2DemoPanel1251,1000);
var binded1251 = false;
$("textarea#stepcodeTextarea1251").keyup(function(){
if(!binded1251){
$(window).bind('beforeunload',function(){
binded1251 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1251 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1251!=newCode){
// window.frames["iframe1251"].document.write("
");
// window.frames["iframe1251"].document.write(decodeHtml($("textarea#stepcodeTextarea1251").val()));
// window.frames["iframe1251"].document.close();
// $(window.frames["iframe1251"]).load(function(){
// $("#iframe1251").height($("#iframe1251").contents().find("body").height()+showittryitheight);
// });
// code1251 = newCode;
// }
});
$(".tryButton1251").click(function(){
$("#tryDiv1251").show();
$("#stepcodeTextarea1251").focus();
$("#stepcodeTextarea1251").height(200);
$("#iframe1251").height(0);
window.frames["iframe1251"].document.write("
");
window.frames["iframe1251"].document.write(decodeHtml($("textarea#stepcodeTextarea1251").val()));
window.frames["iframe1251"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1251"]).load(function(){
$("#iframe1251").height($("#iframe1251").contents().find("body").height()+showittryitheight);
});
$("#iframe1251").height($("#iframe1251").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1251.focus();
editor1251.setSize(null, "250");
$("#rendering1251").hide();
$("#rendered1251").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1251 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1251"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1251.on("change",function(doc){
if(!binded1251){
$(window).bind('beforeunload',function(){
binded1251 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1251 = newCode;
$("textarea#stepcodeTextarea1251").val(newCode);
if(alreadyWriteCode1251!=code1251){
lastModifedTime1251 = new Date().getTime();
$("#rendering1251").show();
$("#rendered1251").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1251 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1251.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1251").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
