-1

I am new in web-technology. I am tring to send data from PHP Server to client test.html. But only alert("1") comes but alert("2") does not printed I just wanted to print Json data into alert(JSON.stringify(response));, Please tell me where I am wrong?

My server code is api.php

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","1234");
mysql_select_db("demo");
if(isset($_GET['type']))
{
    if($_GET['type']=="login"){
        $username=$_GET['UserName'];
        $Password=$_GET['Password'];
        $query="Select * from registration where UserName='$username' and Password='$Password'";
        $result=mysql_query($query);
        $totalRows=mysql_num_rows($result); 
        if($totalRows>0){
            $recipes=array();
            while($recipe=mysql_fetch_array($result, MYSQL_ASSOC)){
                $recipes[]=array('User'=>$recipe);
            }
            $output=json_encode(array('Users'=>$recipes));
            echo $output;
        }
    }
}
else{
    echo "Invalid format";
}

My Client code test.html

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JSON </title>
        <script src="Scripts/jquery-1.8.2.js">
        </script>
        <script>
            $(document).ready(function(){
                alert("1");
               $("#btnLogin").click(function(){
                   alert("2");
                  $.ajax({
                      url:"http://localhost/Experiements/webservices/api.php",
                      type:"GET",
                      dataType:"json",
                      data:{type:"login", UserName:"abhishek",Password:"123456"},
                      ContentType:"application/json",
                      success: function(response){
                          alert(JSON.stringify(response));
                      },
                      error: function(err){
                          alert(JSON.stringify(err));
                      }
                  })
               }); 
            });
        </script>
    </head>
    <body>
        <input type="button" id="btnLogin" name="btnLogin" value="Login"/>
    </body>
</html>

DataBase is demo, username is root and password is 1234 and table is registration enter image description here

Neelabh Singh
  • 2,600
  • 12
  • 51
  • 88
  • Above is working code, thanks to @Indra Kumar S, I corrected the error, You have just download jquery-1.8.2.js and save inside Scripts folder then It will work. – Neelabh Singh Jan 01 '15 at 09:51
  • This question seems to have an [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) and the title should be changed to indicate it's about debugging a particular implementation. Not sure how to phrase it though, without referring directly to an answer, which suggests the problem hasn't been narrowed down far enough in the question. – Anko - inactive in protest Jan 01 '15 at 10:05
  • Does this answer your question? [Sending data from server to client?](https://stackoverflow.com/questions/16088691/sending-data-from-server-to-client) – Donald Duck Aug 26 '21 at 07:26

3 Answers3

3

In jquery # selector is used to select an element by its id (not its name attribute).So add an id to your button.

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

Now your $("#btnLogin").click() function should work.

phpcoderx
  • 570
  • 5
  • 16
2

Error 1: Missing id in your input. Add it

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

Error 2: Your ajax url ends with php But you have mentioned api.html

  url:"http://localhost/Experiements/webservices/api.php",
Indra Kumar S
  • 2,818
  • 2
  • 16
  • 27
0

use id attribute in input element to refer it with #btnLogin in javascript

Madhura KM
  • 140
  • 1
  • 10