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)
青冥浩盪不見底，日月照耀金銀台。
霓為衣兮風為馬，雲之君兮紛紛而來下。
虎鼓瑟兮鸞回車，仙之人兮列如麻。
忽魂悸以魄動，恍驚起而長嗟。
惟覺時之枕席，失向來之煙霞。
世間行樂亦如此，古來萬事東流水。
別君去兮何時還？且放白鹿青崖間，須行即騎訪名山。
安能摧眉折腰事權貴，使我不得開心顏!