如何在不离开页面的情况下将表单插入mysql（javascript + html）

Question

I'm trying to insert a new user into mysql. I have tried to use jQuery, but it doesn't seem to be working. I tried to use pure javascript, but it's the same. It has no response after I click on the button. What's wrong?

var regBtn = document.getElementById("regBtn");
regBtn.addEventListener("click", submitForm, false);

function submitForm() {

    var acR = document.getElementById("ac2");
    var pw1 = document.getElementById("pw1");
    var shop = document.getElementById("shop");

    var http = new XMLHttpRequest();
    http.open("POST", "http://xyz.php", true);
    http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    var params = "ac=" + acR + "&pw1="+pw1 "&shop="+ shop;
    http.send(params);
    http.onload = function() {
        alert(http.responseText);
    };
}

Answer 1

There's a quite a few problems in your JS code, I've tidied it up here and run it locally to a page called xyz.php , so that'll get the AJAX call to work but you'll need to post your PHP code to get any help with your DB queries

    var regBtn = document.getElementById("regBtn");
    regBtn.addEventListener("click", submitForm, false);

    function submitForm() {

        var acR = document.getElementById("ac2");
        var pw1 = document.getElementById("pw1");

        var http = new XMLHttpRequest();
        // removed the http:// protocol, assuming you're going for a local AJAX call
        http.open("POST", "xyz.php", true);
        http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // get values of the form fields, don't submit the full element
        // also added the plus (+) character before the final pw1
        var params = "ac=" + acR.value + "&pw1=" + pw1.value;
        http.send(params);
        http.onload = function() {
            alert(http.responseText);
        }
    }

I've attached a screen shot showing Chrome Dev Tools happily recording successful AJAX requests

Answer 2

Try to use a JQuery post.

var acR = document.getElementById("ac2");
var pw1 = document.getElementById("pw1");

$.post( "xyz.php", { ac: acR, pw1: pw1 })
.done(function( data ) {
   alert( "Data inserted: " + data );
});

Backend handles this post and then implement the insert action for example in NodeJs(express)

app.post("/xyz", function(req, res, next) {
    var obj = {};
    obj[acR] = body.ac;
    obj[pw1] = body.pw1;
    mysql.insert(obj);

});