Ajax đăng dữ liệu lên PHP

AJAX được sử dụng để giao tiếp với máy chủ để thực hiện hành động mà không cần làm mới trang

Bạn có thể xử lý các yêu cầu AJAX trên cùng một trang hoặc trên một trang riêng biệt

Trong hướng dẫn này, tôi chỉ cho bạn cách gửi và nhận các yêu cầu AJAX trên cùng một trang

Tải xuống

nội dung

1. Cuộc gọi AJAX

Bạn có thể chỉ định URL hoặc không khi gửi yêu cầu AJAX

Với URL

$.ajax[{
  url: 'ajaxfile.php',
  type: 'post',
  data: {value: value},
  success: function[response]{
     // Code
  }
   
}];

không có URL

$.ajax[{
  type: 'post',
  data: {value: value},
  success: function[response]{
    // Code
  }
}];

Thí dụ

$[document].ready[function[]{
  $['#name'].keyup[function[]{
    var name = $['#name'].val[];

    $.ajax[{
       type: 'post',
       data: {name: name},
       success: function[response]{
          $['#response'].text['name : ' + response];
       }
    }];
  }];
}];

2. Xử lý yêu cầu

Đặt mã PHP của bạn ở đầu trang để không có mã HTML nào thực thi trước đó và bất kỳ mã PHP nào echo

Thêm phương thức exit[] vào cuối trình xử lý AJAX

Thí dụ

if[ isset[$_POST['name']] ]{
  echo $_POST['name'];
  exit;
}

3. Tránh xung đột

Nếu biến AJAX và biến được gửi biểu mẫu có cùng tên thì luôn có khả năng xảy ra xung đột

Để giải quyết vấn đề này, hãy thay đổi tên biến hoặc chuyển một giá trị bổ sung với yêu cầu AJAX sẽ chỉ khởi tạo khi gửi yêu cầu AJAX và kiểm tra xem nó có được khởi tạo hay không

Thí dụ

Ở đây, tôi đã vượt qua ajax: 1 từ

$.ajax[{
  type: 'post',
  data: {value: value},
  success: function[response]{
    // Code
  }
}];

$.ajax[{
  type: 'post',
  data: {value: value},
  success: function[response]{
    // Code
  }
}];

$[document].ready[function[]{
  $['#name'].keyup[function[]{
     var name = $['#name'].val[];
 
     $.ajax[{
        type: 'post',
        data: {ajax: 1,name: name},
        success: function[response]{
           $['#response'].text['name: ' + response ];
        }
     }];
  }];
}];

4. Ví dụ 1

Gửi yêu cầu AJAX khi kích hoạt sự kiện

$.ajax[{
  type: 'post',
  data: {value: value},
  success: function[response]{
    // Code
  }
}];

$.ajax[{
  type: 'post',
  data: {value: value},
  success: function[response]{
    // Code
  }
}];

$.ajax[{
  type: 'post',
  data: {value: value},
  success: function[response]{
    // Code
  }
}];

$.ajax[{
  type: 'post',
  data: {value: value},
  success: function[response]{
    // Code
  }
}];

 
 
 
   
      
      

      

   

   
   
   
   $[document].ready[function[]{
      $['#name'].keyup[function[]{
         var name = $['#name'].val[];

         $.ajax[{
            type: 'post',
            data: {ajax: 1,name: name},
            success: function[response]{
               $['#response'].text['name : ' + response];
            }
         }];
      }];
   }];
   
 

Xem bản trình diễn

5. Ví dụ 2 [Với phản hồi JSON]

Một ví dụ đơn giản với phản hồi JSON

 
 
 
   
       JavaScript 

       PHP 

       jQuery 

       AJAX 

      
      

   

   
   
   
   $[document].ready[function[]{
      $['#but'].click[function[]{
 
         var checkarr = [];
         $["input[type=checkbox]:checked"].each[function[index,element]{
            checkarr.push[$[element].val[]];
         }];

         if[checkarr.length > 0]{
            $.ajax[{
               type: 'post',
               data: {ajax: 1,checked: checkarr},
               dataType: 'json',
               success: function[response]{
                   $['#response'].text['response : ' + JSON.stringify[response] ];
               }
            }];
         }
 
      }];
   }];
   
 

Xem bản trình diễn

6. Kết luận

Tốt hơn là chuyển một tham số bổ sung với yêu cầu AJAX để tránh bất kỳ xung đột nào với các biến

$.ajax[{
  type: 'post',
  data: {value: value},
  success: function[response]{
    // Code
  }
}];

Làm cách nào để đăng dữ liệu qua AJAX?

Làm cách nào để gửi giá trị nút tới chương trình phụ trợ php qua bài đăng bằng AJAX?

Làm cách nào để lấy dữ liệu AJAX trong php trên cùng một trang?