want to use Javascript (ajax) and PHP to perform database operations without reloading the page

Question

i am trying to write a code for taking the input (Email) from a form and save to the database

I used ajax to save the data to the xml file instead of saving to the database .. and it worked pretty well. but using xml instead of database is not secure. the user can view the whole xml and data in it.!

so i want to take the data from form and display if the email is already available in the database.! ! i want all this to happen in the background just like AJAX .. i dont want the user to get redirected to other pages or the page to be reloaded . . i wrote a php script that checks whether the email is already in the data base.

PHP

<?php

    $count=0;
    $email = $_POST['subs_input'];
    $con1= new PDO('mysql:host=localhost; dbname=emails' , 'root' , '');
    $q = "INSERT INTO `emails`.`email` VALUES ('$email')";
    $q1 = "SELECT * FROM `emails`.email`";
    $result = $con1->query($q1);
    while($ret = $result->fetch(PDO::FETCH_ASSOC)){
        $ele = $ret['email'];
        if($ele == $email){
            echo "Email already exists";
            $count=1;
        }
    }
    if($count==0){
        $con1->query($q);
        echo"subscribed sucessfully";
    }
?>

instead of echoing out the statements i can wrap them in xml content and send the responseXML to the javascript ajax. all i need to know is

    if(xmlhttp.readyState == 4 || xmlhttp.readyState == 0){
        xmlhttp.open("POST","../text/info.php",true);
        ...
        ...
    }

how to send the email(input from html) to php from ajax request. in order to access it in php.. i know this can be done pretty easily using jquery.. but I DONT WANT TO USE JQUERY. i want to learn it the hard way.

than you in advance;

Create a FormData object, and add the email information to it. See: developer.mozilla.org/en-US/docs/Web/API/FormData (.append() for adding information) - then, when you're sending, use xmlhttp.send(<FormData Object>); On the backend, you retrieve the information via $_POST — helllomatt
– helllomatt, Commented Apr 15, 2016 at 18:56
Your code is open to SQL injections. Use parameterized queries. — chris85
– chris85, Commented Apr 15, 2016 at 18:59
hellomatt.. thank you..! that really helped..! i am gonna update my javascript and use FormData. thank you for your instant reply..! — Imtiaz Abbas
– Imtiaz Abbas, Commented Apr 15, 2016 at 19:11
hey chris85.. i am not buiding this website for commercial use..!! i am just learning stuff..! haven't thought about that yet. well thank you for letting me know about SQL injections.. will learn about perameterized queries .. thank you..!! :) — Imtiaz Abbas
– Imtiaz Abbas, Commented Apr 15, 2016 at 19:17

Jose Serodio · Accepted Answer · 2016-04-15 19:48:24Z

1

I guess you need something like this.

var dir = "../text/info.php";
var request = new XMLHttpRequest();

var email = document.getElementById("email").value;
var data = "subs_input="+email;

request.open("POST", dir, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", data.length);
request.setRequestHeader("Connection", "close");

request.onload = function() {
  if (request.status === 200) {
      // code if everything went fine
      // request.responseText for printing echoes
  } else {
      // code if otherwise
  }
};

// sending data here
request.send(data);

edited Apr 15, 2016 at 19:48

answered Apr 15, 2016 at 19:25

Jose Serodio

1,4593 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Imtiaz Abbas Over a year ago

thanks for the answer . but i dont think this'll work in my case..! cuz i want to send a variable from js to php using request.open and request.send..

Jose Serodio Over a year ago

I refactored the code, is it more suited for you now?

Imtiaz Abbas Over a year ago

yeah.. this is what i wanted to do..!! thank you for the response..!! jserodio :)

Collectives™ on Stack Overflow

want to use Javascript (ajax) and PHP to perform database operations without reloading the page

PHP

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

PHP

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related