1、直接將代碼放入壹個以.html為後綴的文件中，並且下載壹個js，取名為jquery-1.7.2.min.js，放在同壹個目錄下即可。
2、效果如代碼後的圖片
3、本次答案僅供參考，不喜勿噴
*************************以下為代碼部分 begin*****************************
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串拼接返回url地址</title>
<style>
/**初始化樣式**/
*{margin:0;padding:0;}
/**清除浮動樣式**/
.clc{clear:both;}
/**文字居中**/
.txtcenter{text-align:center;}
.url_content{width:70%;margin:20px auto;}
.c_input,.c_btn,.c_show{overflow:hidden;}
.ci_left,.ci_right{float:left;min-height:200px;border:1px solid #AEAEAE;}
.ci_left{width:40%;}
.ci_right{margin-left:1%;width:58%;background:#E7E7E7;}
.cil_unit{width:70%;margin:20px auto;overflow:hidden;}
.inp_txt,.cil_input{float:left;}
.inp_txt{color:#30C0FF;height:30px;margin-top:5px;width:100px;}
.cil_input{height:30px;width:180px;border-radius:5px;border:1px solid #CFCFCF;}
.btn_1,.btn_2,.btn_3{float:left;width:18%;margin:20px 5%;height:45px;line-height:45px;border-radius:5px;background:#30C0FF;color:white;}
.cs_f{border:1px solid #C7C7C7;height:45px;line-height:45px;margin:20px auto;font-size:18px;overflow:hidden;}
.c_red{color:red;}
.c_green{color:green;}
</style>
<!-- 引入jq -->
<script src='jquery-1.7.2.min.js'></script>
</head>
<body>
<div class='url_content'>
?<div class='c_input'> ?<div class='ci_left'> ?<div class='cil_unit'> ?<div class='inp_txt'>服務器地址：</div> ?<input class='cil_input serveraddr' type='text' placeholder='請輸入服務器地址' /> ?</div> ?<div class='cil_unit'> ?<div class='inp_txt'>ID號：</div> ?<input class='cil_input idaccount' type='text' placeholder='請輸入ID' /> ?</div> ?<div class='cil_unit'> ?<div class='inp_txt'>設置項：</div> ?<input class='cil_input setvalue' type='text' placeholder='請輸入設置項' /> ?</div> ?</div> ?<div class='ci_right'> ?<p>返回結果：</p> ?<p class='txtcenter result'>這裏顯示返回來的結果</p> ?</div> ?</div> ?<div class='clc'></div> ?<div class='c_btn'> ?<div class='btn_1 txtcenter'>功能1 (function1)</div> ?<div class='btn_2 txtcenter'>功能2 (function2)</div> ?<div class='btn_3 txtcenter'>功能3 (function3)</div> ?</div> ?<div class='clc'></div> ?<div class='c_show'> ?<div class='cs_f'><p>功能1按鈕點擊效果為：:222</span>/<span class='c_green'>function1</span>.do?info={"A":"<span class='c_red'>yyy</span>","B":"333<span class='c_green'>funciton1</span>","C":"<span class='c_red'>zzz</span>"}<p></div> ?<div class='cs_f'><p>功能2按鈕點擊效果為：:222</span>/<span class='c_green'>function2</span>.do?info={"A":"<span class='c_red'>yyy</span>","B":"333<span class='c_green'>funciton2</span>"}<p></div> ?</div></div>
<script>
?function changeContent(flag){ ?var inp1 = $.trim($(".serveraddr").val()) ;//服務器地址 ?var inp2 = $.trim($(".idaccount").val()) ;//ID ?var inp3 = $.trim($(".setvalue").val()) ;//設置 ?if(flag=="1"){ ?var content = "http://"+inp1+"/function1.do?info={'A':'"+inp2+"','B':'333function1','C':'"+inp3+"'}"; ?}else if(flag=="2"){ ?var content = "http://"+inp1+"/function2.do?info={'A':'"+inp2+"','B':'333function2'}"; ?} ?$(".result").html(content); ?} ?$(".btn_1").click(function(){//功能1按鈕點擊觸發 ?changeContent("1"); ?}); ?$(".btn_2").click(function(){//功能1按鈕點擊觸發 ?changeContent("2"); ?}); ?
</script>
</body>
</html>
*************************以上為代碼部分 end*****************************