jQuery获取表单项目以及AJAX使用

2012-09-09

jQuery获取表单项目以及AJAX应用转载自：http://www.tsingfeng.com/?p251.假如我们有如下页面input?type

jQuery获取表单项目以及AJAX应用

转载自：http://www.tsingfeng.com/?p=25

1.假如我们有如下页面

<input?type="text"?name="textname"?id="text_id"?value="">? ??

2.下面来看怎么取得FORM中的各种值等等;

function?get_form_value(){? ??
/*获得TEXT.AREATEXT的值*/? ??
? ???var?textval?= $("#text_id").attr("value");//或者? ??
? ???var?textval?= $("#text_id").val();? ??
/*获取单选按钮的值*/? ??
? ???var?valradio?= $("input[@type=radio][@checked]").val();? ??
/*获取复选框的值*/? ??
? ??var?checkboxval?= $("#checkbox_id").attr("value")；? ??
/*获取下拉列表的值*/? ??
? ???var?selectval?= $('#select_id').val();? ??
}

3.另外对表单的其他处理:

//控制表单元素：? ??
//文本框，文本区域：? ??
$("#text_id").attr("value",'');//清空内容? ??
$("#text_id").attr("value",'test');//填充内容? ??
//多选框checkbox：? ??
$("#chk_id").attr("checked",'');//未选中的值? ??
$("#chk_id").attr("checked",true);//选中的值? ??
if($("#chk_id").attr('checked')==undefined)?//判断是否已经选中? ??
//单选组radio：? ??
$("input[@type=radio]").attr("checked",'10');//设置value=10的单选按钮为当前选中项? ??
//下拉框select：? ??
$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项? ??
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option? ??
$("#select_id").empty()；//清空下拉框

4.jQuery的AJAX应用

Xhtml文件如下：

<div?id="result"?style="backgroundrange;border:1px solid red;width:300px;height:400px;"></div>??
<form?id="formtest"?action=""?method="post">??
<p><span>输入姓名:</span><input?type="text"?name="username"?id="input1"?/></p>??
<p><span>输入年龄:</span><input?type="text"?name="age"?id="input2"?/></p>??
<p><span>输入性别:</span><input?type="text"?name="sex"?id="input3"?/></p>??
<p><span>输入工作:</span><input?type="text"?name="job"?id="input4"?/></p>??
</form>??
<button?id="send_ajax">提交</button>??
<button?id="test_post">POST提交</button>??
<button?id="test_get">GET提交</button>

接着引入jQuery

<script??type="text/javascript"?src="../jquery.js"></script>

再接着构建AJAX，jQuery有个好处，不需要在XHTML中夹杂着JS代码来触发事件了，可以直接封装在JS文件中

<script?type="text/javascript">? ?
//$.ajax()方式? ?
$(document).ready(function?(){? ?
?? $('#send_ajax').click(function?(){?//直接把onclick事件写在了JS中，而不需要混在XHTML中了? ?
? ? ? ? ??var?params=$('input').serialize();?//序列化表单的值，与prototype中的form.serialize()相同? ?
? ? ? ?? $.ajax({? ?
? ? ? ? ? ? ???url?：'ajax_test.php',??//后台处理程序? ?
? ? ? ? ? ? ???type:'post',? ??//数据发送方式? ?
? ? ? ? ? ???dataType:'json',??//接受数据格式? ?
? ? ? ? ? ? ???data:params,??//要传递的数据? ?
? ? ? ? ? ? ???success:update_page??//回传函数(这里是函数名)? ?
? ? ? ? ? ? ???});? ?
? ? ? ??});? ?
});? ?
function?update_page?(json)?{?//回传函数实体，参数为XMLhttpRequest.responseText? ?
? ? ???var?str="姓名:"+json.username+"";? ?
? ? ???str+="年龄:"+json.age+"";? ?
? ? ???str+="性别:"+json.sex+"";? ?
? ? ???str+="工作:"+json.job;? ?
? ? ?? $("#result").html(str);? ?
}? ?
//$.post()方式：? ?
$(function?(){//$(document).ready(function (){ 的简写? ?
? ? ? $('#test_post').click(function?(){? ?
? ? ? ? ? ? ? ? $.post('ajax_test.php',? ?
? ? ? ? ? ? ??{username('#input1').val(),age('#input2').val(),sex('#input3').val(),job('#input4').val()},? ?
? ? ? ? ? ? ? ??function?(data){?//回传函数? ?
? ? ? ? ? ? ? ??var?myjson='';? ?
? ? ? ? ? ? ???eval('myjson='+data+';');? ?
? ? ? ? ? ? ?? $('#result').html("姓名:"+myjson.username+"??
工作:"+myjson['job']);? ?
? ? ? ? ? ? ???});? ?
? ? ???});? ?
});? ?
//$.get()方式：? ?
$(function?(){? ?
? ? ? ?? $('#test_get').click(function?(){? ?
? ? ? ? ? ? ? ? ? ?? $.get('ajax_test.php',? ?
? ? ? ? ? ? ? ? ? ??{username("#input1").val(),age("#input2").val(),sex("#input3").val(),job("#input4").val()},? ?
? ? ? ? ? ? ? ? ? ???function??(data)?{? ?
? ? ? ? ? ? ? ? ? ? ? ? ???var?myjson='';? ?
? ? ? ? ? ? ? ? ? ? ? ? ???eval("myjson="+data+";");? ?
? ? ? ? ? ? ? ? ? ? ? ? ?? $("#result").html(myjson.job);? ?
? ? ? ? ? ? ? ? ? ? ??});? ?
? ? ? ? ???});? ?
});? ?
</script>

后段的php处理代码如下：

<?php? ?
$arr　=　$_POST;?//若以$.get()方式发送数据，则要改成$_GET.或者干脆_REQUEST? ?
$myjson=json_encode($arr);? ??
echo?$myjson;? ?
?>

热点排行

Ajax

jQuery获取表单项目以及AJAX使用