jQuery与ajax

迷南。 2022-08-07 08:52 150阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<HTML>  
 <HEAD>  
  <TITLE> New Document </TITLE>  
  <META NAME="Generator" CONTENT="EditPlus">  
  <META NAME="Author" CONTENT="">  
  <META NAME="Keywords" CONTENT="">  
  <META NAME="Description" CONTENT="">  
  <script src="js/jquery-1.3.1.js" ></script>  
  <script language="javascript" >

function createQueryString()\{  
  var name = encodeURI($("\#input1").val());  
  var age = encodeURI($("\#input2").val());  
  var sex = encodeURI($("\#input3").val());  
  var job = encodeURI($("\#input4").val());  
  var queryString = \{username:name,age:age,sex:sex,job:job\};  
  return queryString;  
 \}

$(function()\{  
  $("input=\[name='btn1'\]").click(function()\{  
   //$.get(\[url\],\[data\],\[callback\]);  
   //$.post(\[url\],\[data\],\[callback\],type);  
   $("\#target").load("14-1.aspx");  
   //方式1  
   $.post('14-1.aspx',\{username:$('\#input1').val(),age:$('\#input2').val(),sex:$('\#input3').val(),job:$('\#input4').val()\},function(data)\{$('\#target').html(data);\});  
   //方式2

$.post("14-1.aspx",createQueryString(),function(data)\{$("\#target").html(decodeURI(data));\});  
   //方式3

$.ajax(\{  
    type:"post",  
    url:"14-1.aspx",  
    data:createQueryString(),  
    success:function(data)\{$("\#target").html(decodeURI(data));\}  
   \});  
  \});  
 \});

</script>  
 </HEAD>

\---------------------------------------------------------------------------------------------

参考自：[http://learning.artech.cn/20080620.javascsript-jquery-ajax.html][http_learning.artech.cn_20080620.javascsript-jquery-ajax.html]

\----------------------------------------------------------------------------------------------

测试JQuery中常用的取值方法 包含（input areatext select checkbox radio ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">  
<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]">  
<head>  
    <title>无标题页</title>

$(function()\{  
    $('\#test\_Sel').click(function()\{  
        var va = $("\#sel").val();  
        $("\#sel").attr("value","4");  
        alert(va);  
    \});

\});

$(function()\{  
   $('\#test\_Rad').click(function()\{  
        var v = $("input\[name='as'\]\[checked\]").val();  
        alert(v);  
   \});

\});

$(function()\{  
    $("\#checkedAll").click(function()\{  
        if($(this).attr("checked") == true)  
        \{  
           $("input\[name='chk'\]").each(function()\{$(this).attr("checked",true);\});  
        \}  
        else  
        \{  
            $("input\[name='chk'\]").each(function()\{$(this).attr("checked",false);\});  
        \}  
    \});  
\});

$(function()\{  
    $("\#test\_Chk").click(function()\{var f="";  
     //var f = $("input\[name='chk'\]").checkbox().val();  
     $("input\[name='chk'\]").each(function()\{  
        if($(this).attr("checked") == true)\{if(f)\{f+=",";\}f+=$(this).attr("value");\}  
     \});  
      alert(f);  
    \});  
\});

$(function()\{  
    $("\#test").click(function()\{  
       alert( $("\#aera").val());  
    \});  
\});  
    </script>

</head>  
<body>  
    <form id="formtest" action="" method="post">  
        <span>输入姓名:</span><input type="text" name="username" id="input1" /><br />  
        <span>输入年龄:</span><input type="text" name="age" id="input2" /><br />  
        <span>输入性别:</span><input type="text" name="sex" id="input3" /><br />  
        <span>输入工作:</span><input type="text" name="job" id="input4" />  
        <div id="result" style="background: orange; border: 1px solid red; width: 200px;  
            height: 150px; display: none">  
            正在反馈信息……</div><br />  
        <select size="1" style="width: 100px" id="sel" name="sel">  
            <option value="1" selected>1</option>  
            <option value="2">2</option>  
            <option value="3">3</option>  
            <option value="4">4</option>  
            <option value="5">5</option>  
        </select>  
        <input type="radio" name="as" value="0" checked />男  
        <input type="radio" name="as" value="1" />女  
        <br />  
        <div class="components-list">  
            <input type="checkbox" name="chk" id="checkbox\_name\_1" value="1" />复选1<br />  
            <input type="checkbox" name="chk" id="checkbox\_name\_2" value="2" />复选2<br />  
            <input type="checkbox" name="chk" id="checkbox\_name\_3" value="3" />复选3<br />  
            <input type="checkbox" name="chk" id="checkbox\_name\_4" value="4" />复选4<br />  
            <input type="checkbox" name="checkedAll" id="checkedAll" />全选/取消全选  
        </div>  
        <div>  
            <textarea id="aera" cols="12" rows="3"></textarea>  
        </div>  
    </form>  
    <button id="send\_ajax">提交</button>  
    <button id="test\_post">Post</button>  
    <button id="test\_Sel">测试Selector</button>  
    <button id="test\_Rad">测试Radio</button>  
    <button id="test\_Chk">测试CheckBox</button>  
    <button id="test">测试areatext</button>  
</body>  
</html>

转自：[http://www.cnblogs.com/snlfq2000/archive/2009/02/19/1393960.html][http_www.cnblogs.com_snlfq2000_archive_2009_02_19_1393960.html]

[http_learning.artech.cn_20080620.javascsript-jquery-ajax.html]: http://learning.artech.cn/20080620.javascsript-jquery-ajax.html
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml
[jquery.js]: http://files.cnblogs.com/snlfq2000/jquery.js
[jquery_selecter.js]: http://files.cnblogs.com/snlfq2000/jquery_selecter.js
[jquery_checkbox.js]: http://files.cnblogs.com/snlfq2000/jquery_checkbox.js
[http_www.cnblogs.com_snlfq2000_archive_2009_02_19_1393960.html]: http://www.cnblogs.com/snlfq2000/archive/2009/02/19/1393960.html