jQuery与ajax

最新推荐文章于 2024-10-11 16:49:16 发布

jbgtwang

最新推荐文章于 2024-10-11 16:49:16 发布

阅读量713

点赞数

文章标签： jquery function input button ajax javascript

<!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

----------------------------------------------------------------------------------------------

测试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">
<html xmlns="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>