在与阿贾克斯的无线上点击一个div 4外部负载form.html [英] 4 external load form.html in a div on click on the radio with ajax
问题描述
我想加载到4单选按钮，使用AJAX 4页。 例： 电台将pageA.html负荷 无线电b装入pageB.html 广播C加载pageC.html 无线电旦负荷pageD.html 如果用户刷新页面，我想留你所做的最后选择。 我是新的AJAX。 第一电台A完美的办公室将pageA.html。从这里开始，我不知道如何加载其他页面，如果你被选中。
如何才能提高我的脚本？
提前致谢
HTML code
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;＆LT; /标题＆GT;
＆LT;元的charset =UTF-8＆GT;
＆LT; META NAME =视口内容=WIDTH =设备宽度＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
收音机＆LT;输入ID =按钮类型=电台NAME =按钮值=/＆GT;
广播B＆LT;输入ID =按钮类型=电台NAME =按钮值=/＆GT;
广播℃下输入ID =按钮类型=电台NAME =按钮值=/＆GT;
广播D＆LT;输入ID =按钮类型=电台NAME =按钮值=/＆GT;
＆LT; DIV ID =内容＆GT;＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS /库/ jQuery的/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / ajax.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我的AJAX code
$（'＃键）。点击（函数（）{
$阿贾克斯（{
网址：将pageA.html，
成功：功能（数据）{
$（'＃内容）HTML（数据）。
}
}）;
}）;
如果您更改此ID的页面名称，您可以缩短这样你的code -
HTML
收音机A＆LT;输入ID =pageA的类型=无线电名称=按钮值=/＆GT;
广播B＆LT;输入ID =页面B类型=电台NAME =按钮值=/＆GT;
广播℃下输入ID =pageC类型=电台NAME =按钮值=/＆GT;
广播D＆LT;输入ID =分页类型=电台NAME =按钮值=/＆GT;
jQuery的
$（'输入[类型=无线电]）。点击（函数（）{
VAR页面名称= this.id;
$（'＃内容）负载（页面名称+'的.html'）;
}）;
另外，你可以给每个按钮的一类，然后用在你的选择。无论哪种方式，使您不必重复code。
I would like to load pages 4 through 4 radio button with AJAX. example: Radio A load pageA.html Radio B load pageB.html Radio C load pageC.html Radio D load pageD.html And if the user refreshes the page I'd like to remain the last selection you made. I'm new with AJAX. The first Radio "A" office perfectly pageA.html. From here on, I have no idea how to load the other pages if you are selected.
How can I improve my script?
Thanks in advance
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
Radio A <input id="button" type="radio" name="button" value=""/>
Radio B <input id="button" type="radio" name="button" value=""/>
Radio C <input id="button" type="radio" name="button" value=""/>
Radio D <input id="button" type="radio" name="button" value=""/>
<div id="content"></div>
<script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
</body>
</html>
My AJAX code
$('#button').click(function() {
$.ajax({
url: 'pageA.html',
success: function(data) {
$('#content').html(data);
}
});
});
If you change the id to the page name then you can shorten your code like this -
HTML
Radio A <input id="pageA" type="radio" name="button" value=""/>
Radio B <input id="pageB" type="radio" name="button" value=""/>
Radio C <input id="pageC" type="radio" name="button" value=""/>
Radio D <input id="pageD" type="radio" name="button" value=""/>
jQuery
$('input[type="radio"]').click(function() {
var pageName = this.id;
$('#content').load(pageName + '.html');
});
In addition you could give each button a class, then use that in your selector. Either way keeps you from having to repeat code.
这篇关于在与阿贾克斯的无线上点击一个div 4外部负载form.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
