jQuery Ajaxリクエストでphpファイルに送信するサンプル

2022年10月21日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit
jQuery 3.6.0

書き方

$.ajax({

url: "リクエストを送るURL"

type: 'POST',

data: {変数名:値"},

timeout: タイムアウトの時間,

dataType: 'text'

$.ajax({ url: "リクエストを送るURL" type: 'POST', data: {変数名:値"}, timeout: タイムアウトの時間, dataType: 'text'

$.ajax({        
      url: "リクエストを送るURL"
      type: 'POST',
      data: {変数名:値"},
      timeout: タイムアウトの時間,
      dataType: 'text'

画面の一部分だけ更新する際にajaxを利用します。
説明
URL リクエストを送るURL
method 'POST’、’GET’、’PUT’のHTTPメソッド。デフォルトは’GET’
data サーバーに送るデータ
dataType　’xml’、’html’、’script’、’json’、’jsonp’、’text’など使用可能なタイプ
timeout リクエストがタイムアウトする時間をミリ秒
success リクエストが成功したときのコールバック関数

使用例

<!DOCTYPE html>

<head>

<title>Ajaxのサンプル</title>

</head>

<body>

<p>

</p>

$(function(){

$('#btnreg').click(function(){

$.ajax({

url:'reg.php',

type:'GET',

dataType:'text',

data: {

username:$('#username').val()

}).done(function(data){

//Ajax通信に成功したときの処理

$('#result').html(data);

}).fail(function(){

//Ajax通信に失敗したときの処理コード

});

</script>

</body>

</html>

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Ajaxのサンプル</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <p> <label>名前：</lable><input type="text" name="username" id="username"> <input type="button" id="btnreg" value="送信"> </p> <div id="result"></div> <script type="text/javascript"> $(function(){ $('#btnreg').click(function(){ $.ajax({ url:'reg.php', type:'GET', dataType:'text', data: { username:$('#username').val() }, }).done(function(data){ //Ajax通信に成功したときの処理 $('#result').html(data); }).fail(function(){ //Ajax通信に失敗したときの処理コード }); }); }); </script> </body> </html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>
      <label>名前：</lable><input type="text" name="username" id="username">
      <input type="button" id="btnreg" value="送信">
</p>

<div id="result"></div>

<script type="text/javascript">
$(function(){
      $('#btnreg').click(function(){
            $.ajax({
                  url:'reg.php',
                  type:'GET',
                  dataType:'text',
                  data: {
                        username:$('#username').val()
                  },
            }).done(function(data){
                //Ajax通信に成功したときの処理
                  $('#result').html(data);
            }).fail(function(){
                   //Ajax通信に失敗したときの処理コード
            });
      });
});
</script>
</body>
</html>

説明
テキストボックスに名前を入力し、送信ボタンを押すとAjaxリクエストを送信します。

1.送信ボタンのクリック処理　$('#btnreg').click(function(){処理コード

2.「type:'GET'」を指定してAjaxリクエストはGETで送信します。

3.「data: {username:$('#username').val()｝」でテキストボックスに入力された文字列を設定します

4.「$('#result').html(data)」でdiv要素resultにajaxのクラスの中身を書き換えます。

1.送信ボタンのクリック処理　$('#btnreg').click(function(){処理コード 2.「type:'GET'」を指定してAjaxリクエストはGETで送信します。 3.「data: {username:$('#username').val()｝」でテキストボックスに入力された文字列を設定します 4.「$('#result').html(data)」でdiv要素resultにajaxのクラスの中身を書き換えます。

1.送信ボタンのクリック処理　$('#btnreg').click(function(){処理コード
2.「type:'GET'」を指定してAjaxリクエストはGETで送信します。
3.「data: {username:$('#username').val()｝」でテキストボックスに入力された文字列を設定します
4.「$('#result').html(data)」でdiv要素resultにajaxのクラスの中身を書き換えます。

Ajax

Posted by arkgame

関連投稿: