1

コードで Ajax の投稿が機能しない 元のコード (コントローラー コード) の正確な問題がわかりません 助けてください 

class Ajax_post extends CI_Controller {

function __construct()
{
parent::__construct();  
$this->load->helper(array('url'));
}

function index()
{

$this->load->view('ajax_post');
}

function post_action()
{

if(($_POST['username'] == "") || ($_POST['password'] == ""))
{
  $message = "Please fill up blank fields";
  $bg_color = "#FFEBE8";

}elseif(($_POST['username'] != "myusername") || ($_POST['password'] != "mypassword")){
  $message = "Username and password do not match.";
  $bg_color = "#FFEBE8";

}else{
  $message = "Username and password matched.";
  $bg_color = "#FFA";
}

$output = '{ "message": "'.$message.'", "bg_color": "'.$bg_color.'" }';

}
}

?>

これは私のビューページのコードです

    <div id="form_message"></div>
    <form name="ajax_form" id ="ajax_form" method="post">

      Username/Email:*<input type="text" name="username" id="username" size="30" /><br/><br/>
      Password:*<input type="password" name="password" id="password" size="30" /><br/><br/>
      <input type="submit" value="Submit" name="login_submit" id="login_submit" onClick="getData();"/>

  </form>
</div>

これは私の JavaScript コード (ajax_post.js) です。

  function getData(){

    var username=$("#username").val();
    var password=$("#password").val();      
    $.ajax({
    type: "GET",
    url: "http://localhost/CodeIgniter/index.php/ajax_post/post_action",
    dataType: "json",
    data: "username="+username+"&password="+password,
    cache:false,
    success: 
      function(data){
          alert(data);
          }
     // $("#form_message").html(data.message).css({'background-color' : data.bg_color}).fadeIn('slow'); 


});
}
 </body>

私は一日中このことで立ち往生..

コントローラーとjsコードを実行する正しい方法を誰かに教えてください。

4

6 に答える 6

3

POSTリクエストを行っていない場合は、試してください

$.ajax({
    type: "POST", //notice the change

typeasを指定するPOSTことで、POST リクエストを行うことができます

またはあなたが使用することができます$.post

ここにリンクがあります$.ajax

編集

送信ボタンをクリックすると、フォーム送信のデフォルトの動作をキャンセルする必要があります

function getData() {
  var username = $("#username").val();
  var password = $("#password").val();
  $.ajax({
    type:"POST",
    url:"http://localhost/CodeIgniter/index.php/ajax_post/post_action",
    dataType:"json",
    data:{username:username,password:password},
    cache:false,
    success:function (data) {
      alert(data);
    }  
  });
 return false;
}
于 2012-06-16T11:40:57.797 に答える
2

実際、あなたが言及したように「GET」リクエストを行っていますtype: "GET"。これが変更されたjsコードです。

function getData() {
  var username = $("#username").val();
  var password = $("#password").val();
  $.ajax({
    type:"POST",
    url:"http://localhost/CodeIgniter/index.php/ajax_post/post_action",
    dataType:"json",
    data:"username=" + username + "&password=" + password,
    cache:false,
    success:function (data) {
      alert(data);
    }
    // $("#form_message").html(data.message).css({'background-color' : data.bg_color}).fadeIn('slow');
  });
}

編集：次のコードを試してください。送信ボタンから onclick 属性とその値を削除します

$('#ajax_form').submit(function(){
  var username = $("#username").val();
  var password = $("#password").val();
  $.ajax({
    type:"POST",
    url:"http://localhost/CodeIgniter/index.php/ajax_post/post_action",
    dataType:"json",
    data:"username=" + username + "&password=" + password,
    cache:false,
    success:function (data) {
      alert(data);
    }
    // $("#form_message").html(data.message).css({'background-color' : data.bg_color}).fadeIn('slow');
  });
  return false;
})
于 2012-06-16T11:41:40.443 に答える
1

ここで何が機能していないかがわかります。

使用する

onClick="getData(); return false;" // in your submit button

また

function getData(e){
e.preventDefault();
//your code

また

success: 
  function(data){
      alert(data);
return false;
      }
error : function(){
return false;
}
//stops the default dom form submission after success

jqueryがロードされていることを確認してください！

他のJavaScriptを使用している場合は、どの関数にもエラーがないことを確認し、コンソールウィンドウを使用してjsエラーを確認してください

于 2012-06-18T07:09:20.097 に答える
0

関数 getData(){

var username=$("#username").val();
var password=$("#password").val();      
$.ajax({
type: "POST",
url: "http://localhost/CodeIgniter/index.php/ajax_post/post_action",
dataType: "json",
data: {username : username , password :password},
cache:false,
success: 
  function(data){
      alert(data);
      }
 // $("#form_message").html(data.message).css({'background-color' : data.bg_color}).fadeIn('slow');

}); }

于 2014-05-04T14:10:32.550 に答える
0

正確なコールバック データを確認してみましたか? 私は個人的にjson文字列を作成しません。データの配列を作成してみてください

$data = array();
$data['message'] = //assign here ;
$data['bg_color'] = //assign here ;

次に、出力に json_encode を使用します。

echo json_encode($data);

そのコードは、json 文字列を生成します。これらのように、js コールバックでデータを簡単に取得できます。

data.message
data.bg_color

このコードは私を大いに助けます。それが役に立てば幸い。

于 2012-06-16T14:47:53.113 に答える
0

まず、$_POST を使用しています。$this->input->post('var') または get を使用します。次に、json データを返していません。代わりにこれを使用してください。

$.ajax(’url’).done(function(data){
$(’#message’).html(data);
 })
于 2012-06-16T11:46:09.443 に答える