Ajaxがボタンで動作しない

送信ボタンが機能しません。スクリプトはadd.phpに私を連れて行くべきではありませんか？代わりに、ページを更新しますか？方法と理由？助けてくださいそれはAjaxスクリプトなしで動作していました。Ajaxがボタンで動作しない

Tommorowは私のラボの試験であり、正しく機能させることができません。

この問題を解決するには、どのような変更が必要ですか？ここ

<script 
src="https://code.jquery.com/jquery-3.2.1.min.js" 
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
crossorigin="anonymous"></script> 

</head> 

<body> 
<a class="btn btn-outline-primary" href="index.php">Home</a> 
<br/><br/> 

<form method="post" id="form1"> 
    <table width="25%" border="0"> 
    ... 
     ... 
     <tr> 
      <td><input class="btn btn-primary" type="reset" 
name="Clear" value="Clear"></td> 
      <td><input type="button" value="send" id="asdasd" 
name="Submit" /></td> 
     </tr> 
    </table> 
</form>

<script> 
$(document).ready(function(e){ 
$("#form1").click(function() { 

var name=$('#name').val(); 
var email=$('#email').val(); 
var age=$('#age').val(); 
var status=$('#status').val(); 

    $.ajax({ 
    type: "POST", 
    url: '../crud/add2.php', 
    data: $('#form1').serialize() 
    }); 

}); 
}); 
</script>

あなたがここにあなたのラボ試験でAJAXを使用する必要が言ったように私のadd.phpファイル

<body> 
<?php 
//including the database connection file 
include_once("config.php"); 

if(isset($_POST)) { 
$name = mysqli_real_escape_string($mysqli, $_POST['name']); 
$age = mysqli_real_escape_string($mysqli, $_POST['age']); 
$email = mysqli_real_escape_string($mysqli, $_POST['email']); 
$status = mysqli_real_escape_string($mysqli, $_POST['status']); 

// checking empty fields 
if(empty($name) || empty($age) || empty($email)|| empty($status)) { 

    if(empty($name)) { 
     echo "<font color='red'>Name field is empty.</font><br/>"; 
    } 

    if(empty($age)) { 
     echo "<font color='red'>Age field is empty.</font><br/>"; 
    } 

    if(empty($email)) { 
     echo "<font color='red'>Email field is empty.</font><br/>"; 
    } 

    if(empty($status)) { 
     echo "<font color='red'>Status field is empty.</font><br/>"; 
    } 

    //link to the previous page 
    echo "<br/><a href='javascript:self.history.back();'>Go Back</a>"; 
} else { 
    // if all the fields are filled (not empty) 

    //insert data to database 
    $result = mysqli_query($mysqli, "INSERT INTO   
users(name,age,email,Status)   
VALUES('$name','$age','$email','$status')"); 

    //display success message 
    echo "<font color='green'>Data added successfully."; 
    echo "<br/><a href='index.php'>View Result</a>"; 
} 
} 
else { 
echo "<font color='green'>NOOOOOOO added successfully."; 
    echo "<br/><a href='index.php'>View Result</a>"; 
} 
?> 
</body> 
</html>

出典

2017-05-29 Mansoor Ahmad

私が見る限り、add.phpへのリダイレクトはありません。 add.phpを得るために、ajaxが出力を返した後に追加することができます。 – Redrif

また、ラボ試験でajaxを使用する必要がありますか？もしそうでなければ、あなたはちょうどアクションのisideフォームタグを入れてadd.phpに設定することができます。 – Redrif

はい私はajaxを使う必要があります。私の研究室の要件、この要件は数分前に今日投稿されました。"CRUD WITH AJAX" –

OKですあなたはAJAX後にリダイレクトする方法です完了：

<script> 
$(document).ready(function(){ 
    $("#asdasd").click(function(e) { 

    var name=$('#name').val(); 
    var email=$('#email').val(); 
    var age=$('#age').val(); 
    var status=$('#status').val(); 

     $.ajax({ 
      type: "POST", 
      url: '../crud/add2.php', 
      data: $('#form1').serialize() 
     }).done(function(data){ 
      window.location.href = "add.php"; // or whatever redirect you want 
     }); 

    }); 
}); 
</script>

また、add.phpにリダイレクトした後に、$ _POSTデータをこのように持たないことを理解しているかどうかわかりません。私は本当になぜあなたがAJAXがあなたのスクリプトを実行するのでadd.phpにリダイレクトしたいのですか（なぜならそれはadd2.phpではありませんが、私はちょうどタイプミスか何かを仮定します）。代わりに、現在のページの本体にajaxの出力を追加することができます（ajaxの本質的な使用 - リダイレクトの必要はありません）。

<form method="post" id="form1" action="add.php">

：このようなタグを形成するためにアクションを追加

変更：あなたはAjaxでデータを追加してもadd.phpページに自分をリダイレクトするときにポストされたデータを取得したい場合しかし、あなたはこのようなものが必要でしょう

そして、スクリプトは次のようになります。

<script> 
$(document).ready(function(){ 
    $("#asdasd").click(function(e) { 
    e.preventDefault(); 
    var name=$('#name').val(); 
    var email=$('#email').val(); 
    var age=$('#age').val(); 
    var status=$('#status').val(); 

     $.ajax({ 
      type: "POST", 
      url: '../crud/add2.php', 
      data: $('#form1').serialize() 
     }).done(function(data){ 
      $soap('#form1').submit(); 
     }); 

    }); 
}); 
</script>

しかし、それはあなたのデータベースに同じ行を2回追加することになり、このよう。

FINAL UPDATE：あなたはこのようになりますcommenctsのadd.phpに望んでいたよう OK：

//including the database connection file 
include_once("config.php"); 

if(isset($_POST)) { 
    $name = mysqli_real_escape_string($mysqli, $_POST['name']); 
    $age = mysqli_real_escape_string($mysqli, $_POST['age']); 
    $email = mysqli_real_escape_string($mysqli, $_POST['email']); 
    $status = mysqli_real_escape_string($mysqli, $_POST['status']); 

    // checking empty fields 
    $result = array(); 
    if(empty($name) || empty($age) || empty($email)|| empty($status)) { 

     if(empty($name)) { 
      $result['error']['name'] = 'Name field is empty.'; 
     } 

     if(empty($age)) { 
      $result['error']['age'] = 'Age field is empty.'; 
     } 

     if(empty($email)) { 
      $result['error']['email'] = 'Email field is empty.'; 
     } 

     if(empty($status)) { 
      $result['error']['status'] = 'Status field is empty.'; 
     } 
    } else { 
     // if all the fields are filled (not empty) 

     //insert data to database 
     $result = mysqli_query($mysqli, "INSERT INTO   
     users(name,age,email,Status)   
    VALUES('$name','$age','$email','$status')"); 

     //display success message 
     $result['success'] = "<font color='green'>Data added successfully.". 
     "<br/><a href='index.php'>View Result</a>"; 
    } 
} else { 
    $result['error_message'] = "<font color='green'>NOOOOOOO added successfully.". 
    "<br/><a href='index.php'>View Result</a>"; 
} 
echo json_encode($result);

スクリプト部分：

<script> 
$(document).ready(function(){ 
    $("#asdasd").click(function(e) { 
     $.ajax({ 
      type: "POST", 
      url: '../crud/add.php', 
      data: $('#form1').serialize(), 
      dataType: 'json' 
     }).done(function(data){ 
      if(data.hasOwnProperty('error_message')){ 
       $('#form1').after(data['error_message']); 
      } else if(data.hasOwnProperty('error')){ 
       for(var key in data['error']) { 
        if (data['error'].hasOwnProperty(key)) { 
         $('#'+key).after(data['error'][key]); 
        } 
       } 
      } else if(data.hasOwnProperty('success')){ 
       $('#form1').after(data['success']); 
      } 
     }); 

    }); 
}); 
</script>

出典

2017-05-29 08:52:18 Redrif

あなたの方法を試してみましょう –

私はいくつかのさらなる情報を追加しました。また、ajaxを使ってデータに送信した後にリダイレクトする必要が本当にあるか、ajaxが完了した後にメッセージを追加する必要があるかどうかを教えてもらえれば良いでしょう。 – Redrif

私のコードはこのように動作しています htmlから取得したデータは - > add.phpに渡します。挿入クエリの後、ホームボタンでエコーします。 –

、ボタンIDをクリックイベントではなく作成してくださいフォームid ..あなたのajaxスクリプトを修正しました。このスクリプトを試してください。

<script> 
    $(document).ready(function(e){ 
     $("#asdasd").click(function() { 
       var name=$('#name').val(); 
       var email=$('#email').val(); 
       var age=$('#age').val(); 
       var status=$('#status').val(); 

    $.ajax({ 
      type: "POST", 
      url: '../crud/add2.php', 
      data: $('#form1').serialize() 
     }); 

    }); 
});

出典

2017-05-29 08:53:58

$(function() { 

$('#form1').on('submit', function (e) { 

    e.preventDefault(); 

    $.ajax({ 
     type: 'post', 
     url: 'add.php', 
     data: $('#form1').serialize(), 
     success: function (data) { 
      alert('form was submitted'); 



     }, 

    error: function() { 
     alert('error'); 
    } 
    }); 

}); 

});

両方のファイルは、.htmlのは、上記のコードが置かれているのjsファイルを持っている必要があります.PHP。これは私のために働いた。

出典

2017-05-30 00:23:29

Ajaxがボタンで動作しない

答えて

関連する問題