JavaScript--AJAX页面传值

1.首先闲话不说直接代码走起，都是我工作闲事的积累干货

//重要 js 运行 
$(function (){ 代码 });

2.ajax 传值

//第一种
输入框 <input type="text" data-upload="Descript" value="" />
$(function () {
       
        $('#btn').click(function () {
            var data = main.getData();
            main.ajaxAlertUniversal('/jbWuLiu/jbWuLiu/ToAreaEd', data);
        })
    })

//第二种
function sub() {
  $('#btn').hide();
  var model = {
      Company: $('#Company').val(),
      BrandID: $('#BrandID').val(),
      BrandTitle: $('#BrandTitle').val(),
      ID: $('#ID').val()
  };
  $.ajax({
      url: '@Url.Action("AddrManageEd")',
      type: 'post',
      data: model,
      success: function(data) {
          if (data.code > 0) {
              alert('修改成功！');
              self.location = document.referrer;
          } else {
              alert(data.msg);
          }
          $('#btn').show();
      }
  });
}
//提交
<input id="btn" type="button" class="btn" value="保存" onclick="sub();" />
//后台代码
return Json(new { code = 1, msg = "操作成功！" });

3.判断不为空

//第一种
$(function () {
            var txt1 = '为必填项';              // 以 HTML 创建新元素
            var txt2 = $("<b></b>").text("Text2.");  // 以 jQuery 创建新元素
            var txt3 = document.createElement("p");
            txt3.innerHTML = "Text.";
            $("#Company").blur(function ()
            {
                if ($("#Company").val().trim() == "") {
                    IsNull = true;
                    $("b").append(txt1).css("color", "red");
                    $(this).css("background-color", "#D6D6FF");
                }
            })
})

//第二种
$(function () {
        $("input").each(function () {
            $(this).focus(function () { $(this).css("background-color", "#FFFFCC") });
            $(this).blur(function () { $(this).css("background-color", "#D6D6FF") });
        })

        $(".must").each(function () {
            $(this).blur(function () {
                if ($(this).val().trim() == "") {
                    $(this).next().html('带*的为必填项').css("color", "red");
                } else {
                    $(this).next().html("");
                }

            })
        })
})

4.地址

//引用
<script src="~/js/main.js"></script>
<script src="~/Scripts/PCASClass.js"></script>
<script>
    $(function () {
        new PCAS("Adress1", "Adress2", "Adress3", '@(Model.FromAddr == "" ? "" : Model.FromAddr.Split(' ')[0])', '@(Model.FromAddr.Split(' ').Length >1 ? Model.FromAddr.Split(' ')[1] : "")', '@(Model.FromAddr.Split(' ').Length == 3 ? Model.FromAddr.Split(' ')[2] :"" )');
    })

    function sub() {
        var FromAddrr = '';
        $('#Adress>select').each(function (index) {
            FromAddrr += $(this).val() +' ';
           // if (index < $('#Adress>select').length - 1) FromAddrr += ' ';
        })

        $("#btn").hide();
        var model = {
            BrandID: $("#BrandID").val(),
            ID: $("#ID").val(),
            FromTitle: $("#FromTitle").val(),
            FromAddr: FromAddrr.trim(' ')
        };
        $.ajax({
            url: '@Url.Action("BrandAdressEd")',
            type: 'post',
            data: model,
            success: function(data) {
                if (data.code > 0) {
                    alert('修改成功！');
                    self.location = document.referrer;
                } else {
                    alert(data.msg);
                }
                $("#btn").show();
            }
        });
    }
</script>

//页面
<li class="fm_item"  id="Adress">
    <label>地址：</label>
    <select name="Adress1" class="selectBox"></select>
    <select name="Adress2" class="selectBox"></select>
    <select name="Adress3" class="selectBox"></select>
</li>
<input id="btn" type="button" class="btn" value="保存" onclick="sub();" />
//return json
return Json(new { code = 1, msg = "添加成功" });

5.取值杂论

$("#xxdxxd").val(this.value);
<input type="text" name="xxdxxd"  id="xxdxxd" />
val = $("#xxdxxd")[0].value;

//例子
<script>
    function Show_xxdxxd(info) {
        //赋值操作
        var txt = info.value;
        $("#xxdxxd").val(txt);
    }

    function get_xxdxxd() {
        //取值操作
        val = $("#xxdxxd")[0].value;
        $("#get_info").html(val);
    }

</script>

<div>
    <input type="text" value="赋值文件框" id="verifyButton"  onchange="Show_xxdxxd(this)" />
    <input type="text" name="xxdxxd"  id="xxdxxd" />
    <p>
        获取文件框值:
        <input type="button" value="读取文件框值" id="verifyButton" onclick="get_xxdxxd()" />
        <div id="get_info"></div>
    <p>
</div>


//单选框
<div>
    <input type="radio" name="_radio" value="1" >
    <input name="_radio" type="radio" value="2" >
    <input type="button" value="赋值文件框" onclick="Show_redio()" />
    <input type="radio" name="radio_type" value="3">
    <input name="radio_type" type="radio" value="4" checked="checked">
    <input type="button" value="赋值文件框" onclick="Show_redio()" />
</div>

<script>
    function Show_redio() {
        //获取单选项值 $("input[type=radio][checked]").val();
        //第一种方法, 取得选中状态的值
        _val = $("input[type=radio][checked]").val();
        //第二种方法,直接用radio的name进行操作, 取得选中状态的值  获取一组radio被选中项的值
        __val = $("input[name=radio_type][checked]").val();

        //radio单选组的第一个元素为当前选中值
        $("input[type=radio]").get(0).checked = true;
        $("input[name=radio_type]").get(0).checked = true;
        //alert(_val);
        //alert(__val); 
    }

</script>

最后赋诗一首

梦游天姥吟留别 / 梦游天姥山别东鲁诸公

唐代：李白
海客谈瀛洲，烟涛微茫信难求；
越人语天姥，云霞明灭或可睹。
天姥连天向天横，势拔五岳掩赤城。
天台四万八千丈，对此欲倒东南倾。(台:tāi)
我欲因之梦吴越，一夜飞度镜湖月。(度通：渡)
湖月照我影，送我至剡溪。(剡:shàn)
谢公宿处今尚在，渌水荡漾清猿啼。(渌:lù)
脚著谢公屐，身登青云梯。 (屐:jī)
半壁见海日，空中闻天鸡。
千岩万转路不定，迷花倚石忽已暝。(暝:míng)
熊咆龙吟殷岩泉，栗深林兮惊层巅。
云青青兮欲雨，水澹澹兮生烟。
列缺霹雳，丘峦崩摧。
洞天石扉，訇然中开。(訇:hōng)
青冥浩荡不见底，日月照耀金银台。
霓为衣兮风为马，云之君兮纷纷而来下。
虎鼓瑟兮鸾回车，仙之人兮列如麻。
忽魂悸以魄动，恍惊起而长嗟。
惟觉时之枕席，失向来之烟霞。
世间行乐亦如此，古来万事东流水。
别君去兮何时还？且放白鹿青崖间，须行即骑访名山。
安能摧眉折腰事权贵，使我不得开心颜!