Ajax Jquery POST | Học lập trình cùng iif

Post nội dung thường
Post có giá trị
Hàm post đầy đủ
POST GIÁ TRỊ CÓ CHỨA HTML
********************************

- Post nội dung thường
==========
<script>
$("#Button1").click(function(){
    $.post( "test2.aspx", function( data ) {
        alert(data );
    });
});
</script>

==========
- Post có giá trị
$.post( "test.aspx", { name: "John", time: "2pm" })
.done(function( data ) {
    alert( "Data Loaded: " + data );
});
Ví dụ 1:
<script>
$("#Button1").click(function(){
$.post("test2.aspx",
{
    name: "Donald Duck",
    city: "Duckburg"
},
function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
});
});
</script>

Tại c# get:
    HttpContext.Current.Request.Form["name"]
    HttpContext.Current.Request.Form["city"]

Ví dụ 2:
<script>
$("#Button1").click(function(){
$.post( "test2.aspx",
$("form").serialize()
)
.done(function( data ) {
alert( "Data Loaded: " + data );
});
});
</script>

Hàm post đầy đủ

$("#Button1").click(function(){
   //alert('xxxx');
   url="/module/data/Default.aspx?file=PhieuThu_Update&obj=sql_pr_post&src=cnSQL&para=NgayPhatSinh:dt;NoiDung:n";

   $.post( url,
   $("#frmChungTu").serialize()
   )
   .done(function( data ) {
        alert( "Data Loaded: " + data );
      }) //done
      .fail(function() {
        alert( "error" );
     }) // fail
    .always(function() {
        alert( "finished" );
    }); //always
}); //Button1

Muốn in test xem cấu trúc của data:
alert( JSON.stringify(data ) );

* tự động tạo tham số, nhưng nếu giá trị có <>.. lỗi, nên chỉ phù hợp với đối tượng không có text, chỉ check, combo...
Để sửa lỗi, dùng hàm encodeURI( $("form").serialize()) để mã hóa các ký tự đặc biệt , qua C# dùng lại hàm HttpUtility.UrlDecode(..)

Ví dụ 3:
Tạo tham số thủ công
<script>
$("#Button1").click(function(){

var dulieu= {};
     dulieu["a"]=1;
     dulieu["b"]=2;

$.post( "test2.aspx",
dulieu
)
.done(function( data ) {
    alert( "Data Loaded: " + data );
});
});
</script>

Tại c# get:
    HttpContext.Current.Request.Form["a"]
    HttpContext.Current.Request.Form["b"]

- Post nội dung JSon

------- Trả về TEXT
HTML:
<input id="Button1" type="button" value="button" />
<script>
var sendInfo = {
           Name: "a",
           Address: "b",
           Phone: "c"
       };
$("#Button1").click(function(){
$.ajax({
    type: "POST",
    url: "test2.aspx",
    data: sendInfo,
    dataType: "text",
    success: function (data) {
         alert(data);
    },
    error: function (result) {
        alert("Lỗi");
    }
});
});
</script>

Tại c# get:
HttpContext.Current.Request.Form["Name"]
HttpContext.Current.Request.Form["Address"]

ASPX:
            Response.Clear();
            Response.ContentType = "text/HTML";
            Response.Write("OK");
            Response.End();

--------------------- TRẢ VỀ JSON **
HTML:
<input id="Button1" type="button" value="button" />
<script>
var sendInfo = {
           Name: "a",
           Address: "b",
           Phone: "c"
       };
var data=   JSON.stringify(sendInfo);


$("#Button1").click(function(){
$.ajax({
    type: "POST",
    url: "/adminxml/test.aspx",
    data: data,
    dataType: "json",
    success: function (data) {
         alert(data);
    },
    error: function (result) {
        alert("Lỗi");
    }
});
});
</script>

Hay viết luôn trong Ajax JS tham số data
$("#Button1").click(function(){
$.ajax({
    type: "POST",
    url: "/adminxml/test.aspx",
    data: JSON.stringify({ Name:"a",Address:"b" }),
    dataType: "json",
    success: function (data) {
         alert(data);
    },
    error: function (result) {
        alert("Lỗi");
    }
});
});

Tại C#:
string input = string.Empty;
DataTable dtIPS;
using (var reader = new System.IO.StreamReader(HttpContext.Current.Request.InputStream))
{
                    input = reader.ReadToEnd();
}
if (input != string.Empty)
{
                    dtIPS = new ConvertJsonStringToDataTable().Json1RowStringToDataTable(input,"root");
                    //foreach (DataRow dr in dt.Rows)

}

//input là dạng chữ
{"Name":"a","Address":"b","Phone":"c"}

ConvertJsonStringToDataTable là hàng chuyển chuổi thành Datatable

CHÚ Ý KHI POST GIÁ TRỊ CÓ CHỨA HTML

** CÁCH 1 (KHÔNG HIỆU QUẢ)
var data = {};
$.each($("#frm").serializeArray(), function() {
    data[this.name] = this.value
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '<')
        .replace(/>/g, '>');
});
$.post( "xml_save.aspx?file={url:file:url}&s_save_after={url:s_save_after:url}",
        data
    )
    .done(function( data ) {
      });

** Cách 2: có sử dụng chuyển đổi ngày

var data = {};
      $.each( $("#frm").serializeArray(), function() {
         data[this.name]=   htmlEncode( this.value); //htmlEncode là hàm mã hóa html về chuổi có sẵn JS
         if(this.name=="NgayThueMatBang")
             data[this.name]= convertDate_dmy_ymd( data[this.name] ).replaceAll("/","-") ;
    });

// Nếu là Ngay thì chuyển từ định dạng d/m/y sang y-m-d (nếu như là d/m/y)

ASPX:
            Newtonsoft.Json.Converters.DataTableConverter JSONConvert = new Newtonsoft.Json.Converters.DataTableConverter();
            string str= Newtonsoft.Json.JsonConvert.SerializeObject("OK");
            Response.Clear();
            Response.ContentType = "application/json";
            Response.Write(str);
            Response.End();

** CÁCH 2 (HIỆU QUẢ)

Click tham khảo

**********************

* Post có headers

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'Authorization':'Basic xxxxxxxxxxxxx',
        'X-CSRF-TOKEN':'xxxxxxxxxxxxxxxxxxxx',
        'Content-Type':'application/json'
    },
    method: 'POST',
    dataType: 'json',
    data: YourData,
    success: function(data){
      console.log('succes: '+data);
    }
});

Tham khảo: https://www.educba.com/jquery-ajax-headers/

https://riptutorial.com/jquery/example/2697/sending-json-data