PHP中的Ajax jQuery概念


                    

我正在尝试在我的应用程序中使用ajax jquery概念,这对我来说是新的。 我已经写出了代码。 但是没有得到确切的输出。 我的代码就像:</ p>

   &lt;/ script&gt;<br>
 <form name =“ ajax” id =“ ajax” method =“ post” action =“”><br>
  用户名:<input type =“ text” name =“用户名” id =“用户名” /> <br /><br>
  密码:<input type =“ text” name =“ pass” id =“ pass” value =“” /> <br /><br>
  <input type =“ submit” name =“ sub_btn” id =“ sub_btn” value =“登录” /><br>
 &lt;/ form&gt;<br>
 <script type =“ text / javascript”><br>
 $(document).ready(function(){<br>
  $(&#39;#sub_btn&#39;)。click(function(){<br>
   var username = $(&#39;#username&#39;)。val();<br>
   var password = $(&#39;#pass&#39;)。val();<br>
   var datastring =“ username =” + username +“&password =” + password;<br>
   $ .ajax({<br>
    类型:“ POST”,<br>
    网址:“ bin / login-process.php”,<br>
    数据:数据字符串,<br>
    成功:function(){<br>
     alert(“成功”);<br>
    },<br>
    错误:function(){<br>
     alert(“失败”);<br>
    }<br>
   });<br>
  });<br>
 });<br>
 &lt;/ script&gt;<br>
 &lt;/ code&gt; &lt;/ pre&gt;</p>

<p><p>,在bin / login-process.php文件中,我仅回显“ hello”。<br>
 现在,如果我尝试运行此页面,我将收到警报消息(“失败”),但这是非常短的时间,它再次重定向到同一页面。 但我不想在用户单击“确定”按钮之前消失警报消息。&lt;/ p&gt;<br>
     &lt;/ div&gt;</p>

展开原文

原文

I am trying to use ajax jquery concept in my application, which is new to me. I have written out the code. But not getting exact output. My code is like:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<form name="ajax" id="ajax" method="post" action="">
 Username: <input type="text" name="username" id="username" /><br />
 Password: <input type="text" name="pass" id="pass" value="" /><br />
 <input type="submit" name="sub_btn" id="sub_btn" value="Login" />
</form>
<script type="text/javascript">
$(document).ready(function(){
 $('#sub_btn').click(function(){
  var username = $('#username').val();
  var password = $('#pass').val();
  var datastring = "username="+username+"&password="+password;
  $.ajax({
   type:"POST",
   url: "bin/login-process.php",
   data: datastring,
   success: function(){
    alert("Success");
   },
   error: function(){
    alert("Fail");
   }
  });   
 });
});
</script>

and in the bin/login-process.php file I just echo "hello". Now if I am trying to run this page,I am getting the alert message("Fail") but that is for a very very short time and it again redirects to the same page. But I don't want to disappear the alert message until user clicks on the "ok" button.

5个回答


您有两种方法可以解决此问题。</ p>

1。</ strong>。将按钮类型更改为“按钮” </ p>


  
</ code> </ pre>
</ blockquote>

2。</ strong>。修改您的点击处理程序</ p>


  $(document).ready(function(){
     $('#sub_btn')。click(function(event){
         event.preventDefault();
</ code> </ pre>
</ blockquote>

原因:</ strong>
在向表单添加提交按钮时,单击按钮会触发一个提交事件,因此将表单提交给提供的操作,在这种情况下,您想使用Ajax提交表单,因此应通过添加 event.preventDefault()表示您正在阻止事件的默认操作。 </ p>

建议:</ strong> </ p>

钩住表单的Submit事件,而不是钩住按钮的click事件,毕竟所有人也都可以提交您的表单,但是点击“ Enter”键。 这对鼠标单击和键盘Enter键都适用。</ p>

  $(document).ready(function(){
     $('#ajax')。submit(function(event){
         event.preventDefault();
</ code> </ pre>
     </ div>

展开原文

原文

You have two ways to fix this problem.

1. Change the button type to "button"

<input type="button" name="sub_btn" id="sub_btn" value="Login" />

2. Modify your click handler

$(document).ready(function(){
    $('#sub_btn').click(function(event){
        event.preventDefault();

Reason: When you add a submit button to your form, clicking the button trigger a submit event hence submit the form to the provided action, in your case you want to submit your form using Ajax so your should prevent the default behavior by adding event.preventDefault() that means you are preventing default action of the event.

Suggestion:

Instead of hooking click event of the button, hook the submit event of the form, after all people can also submit your form but hitting "Enter" key. This will work for both mouse click and keyboard Enter key.

$(document).ready(function(){
    $('#ajax').submit(function(event){
        event.preventDefault();


将按钮类型从“提交”更改为“按钮” </ p>

  
</ code> </ pre>

由于这是使用常规POST方法提交表单的原因,因此页面被重定向。 </ p>

要检查返回的输出,请像这样编写成功函数</ p>

 成功:功能(响应){
     alert(“ Success:” + response);
}
</ code> </ pre>
     </ div>

展开原文

原文

change your button type from submit to button like this

<input type="button" name="sub_btn" id="sub_btn" value="Login" />

as this is submitting your form with normal POST method, that's why your page is getting redirected.

for checking returned output write your success function like this

success: function(response){
    alert("Success :"+response);
}


像这样简单地更新您的点击处理程序功能:</ p>

  $('#sub_btn')。click(function(e){
     e.preventDefault();
     .... //您在这里的所有其他代码。
</ code> </ pre>

这里的问题是您没有停止表单提交的默认操作。
有关 preventDefault </ p>的一些详细信息

另一种选择是在单击功能结束时添加 return false; </ code>。 </ p>


  

我收到警报消息(“失败”),但这是非常非常严重的。
   时间短</ p>
</ blockquote>

单击按钮时,将执行您的功能并启动ajax请求。 但是您不会停止默认操作(提交),并且浏览器将照常提交表单。 这终止了您的ajax调用的执行,从而导致调用错误回调。 </ p>
     </ div>

展开原文

原文

Simply update your click handler function like this:

$('#sub_btn').click(function(e){ 
    e.preventDefault();
    ....//all your other code here.

Problem here is that you do not stop default action which is form submit. Some details about preventDefault

Another option is to add return false; at the end of you click function.

I am getting the alert message("Fail") but that is for a very very short time

When you click button, your function is executed and ajax request is started. But you do not stop default action (submit) and browser submit your form as usual. That terminates execution of your ajax call which results in error callback being called.


请注意,如果HTTP成功(200),则将调用成功函数,因此您必须抛出HTTP错误(例如未授权),以获取错误回调,这是更常规的方法, 通过在服务器中输出json,内容类似于:</ p>

  $ response ['Success'] = false;
如果($ user = User :: tryLogin($ username,$ password)){
   $ response ['Success'] = true;
}
回声json_encode($ response);
</ code> </ pre>

在jQuery成功函数中,您需要执行以下操作:</ p>

  $('#sub_btn')。click(function(){
   var username = $('#username')。val();
   var password = $('#pass')。val();

   $ .post(“ bin / login-process.php”,{用户名:用户名,密码:密码},功能(数据){
     如果(数据成功){
     //登录成功
     }
     其他{
     // 登录失败
     }
   },“ json”);
});
</ code> </ pre>
     </ div>

展开原文

原文

Please note that the success function is being called incase of an HTTP success (200), so you must be throwing an http error (such as unauthorized), to get the error callback, a more regular way of doing so, is by outputting json in the server, something along the lines of:

$response['Success'] = false;
if ($user = User::tryLogin($username, $password)){
  $response['Success'] = true;
}
echo json_encode($response);

and in the jquery success function, you'll need to do something along the lines:

$('#sub_btn').click(function(){
  var username = $('#username').val();
  var password = $('#pass').val();

  $.post("bin/login-process.php", {username : username, password : password}, function(data){
    if (data.Success){
    // login success
    }
    else{
    // login failed
    }
  },"json");
});


使用此:</ p>

   &lt;/ script&gt;<br>
     <form name =“ ajax” id =“ ajax” method =“ post” action =“”><br>
      用户名:<input type =“ text” name =“用户名” id =“用户名” /> <br /><br>
      密码:<input type =“ text” name =“ pass” id =“ pass” value =“” /> <br /><br>
      <input type =“ button” name =“ sub_btn” id =“ sub_btn” value =“登录” /><br>
     &lt;/ form&gt;<br>
     <script type =“ text / javascript”><br>
     $(document).ready(function(){<br>
      $(&#39;#sub_btn&#39;)。click(function(){<br>
       var username = $(&#39;#username&#39;)。val();<br>
       var password = $(&#39;#pass&#39;)。val();<br>
       var datastring = $(&#39;#ajax&#39;)。serialize();<br>
       $ .ajax({<br>
        类型:“ POST”,<br>
        网址:“ bin / login-process.php”,<br>
        数据:数据字符串,<br>
        成功:功能(响应){<br>
         alert(“ Success:” +响应);<br>
        },<br>
        错误:function(){<br>
         alert(“失败”);<br>
        }<br>
       });<br>
      });<br>
     });<br>
     &lt;/ script&gt;<br>
 &lt;/ code&gt; &lt;/ pre&gt;<br>
     &lt;/ div&gt;</p>

展开原文

原文

Use This:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <form name="ajax" id="ajax" method="post" action="">
     Username: <input type="text" name="username" id="username" /><br />
     Password: <input type="text" name="pass" id="pass" value="" /><br />
     <input type="button" name="sub_btn" id="sub_btn" value="Login" />
    </form>
    <script type="text/javascript">
    $(document).ready(function(){
     $('#sub_btn').click(function(){
      var username = $('#username').val();
      var password = $('#pass').val();
      var datastring = $('#ajax').serialize();
      $.ajax({
       type:"POST",
       url: "bin/login-process.php",
       data: datastring,
       success: function(responce){
        alert("Success :"+ responce);
       },
       error: function(){
        alert("Fail");
       }
      });   
     });
    });
    </script>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐