是否可以使用Javascript插入或删除数据库记录？

Question

I'm new to Javascript and I couldn't find this information so far.

I'd like to create a button which, when clicked, creates a new entry in my database, and another one which removes a specific entry when clicked. The reason I don't want to use PHP is because I don't want the page to reload when the button is clicked.

Where can I find information on how to achieve this?

EDIT

Okay I found this:

<script type="text/javascript">
    $(document).on('click','#save',function(e) {
        var data = $("#save-form").serialize();
        $.ajax({
            data: data,
            type: "post",
            url: "save.php",
            success: function(data){
                alert("Data Save: " + data);
            }
        });
    });
</script>

My HTML:

<form id="save-form" method="post">
    <input id="save" type="submit" value="Save" name="save-submit" />
</form>

My PHP file (save.php), which creates a new record in my database, works, but only if my form's action is action="save.php" . What should I put in my form's action to trigger the script?

Also, it seems like the submit button still reloads the page (even if my form has no action ).

Answer 1

You cannot directly communicate with Database from your javascript . What you can do is like use Ajax to communicate with your server side language(It can be anything like PHP,.net,Java etc..) and with the help of server side language communicate with Database

If you are using Ajax then you can make the way asynchronous .

If you really want use JavaScript to communicate with Database then you can go for Node.js (There you can use javascript syntax) but still it is a server side language based on Javascript and its not related to your browser

Why you cannot connect database from client side ??

The main reason is Security . You're not granting DB access to anyone but web server/app user.

The other few reason are

DB load reduction

Scalability  Issues 

Encapsulation Issues 

Ability for fault tolerance

Answer 2

See there are ways to insert into db with using PHP and without doing a postback. But specific to your question you can find answer in below link

Insert Record in Database Using Textboxes in JavaScript

Answer 3

Not only in PHP but also in any other programming language(eg: asp.net,java etc) you can create an entry and remove a specific entry without loading the page. You need to use the plugin of jquery which is called 'ajax'.

Using 'ajax' you can send data to the server without loading the page. And after having your data in server side, you can do whatever you want to do.

You will find ajax documentation here: http://api.jquery.com/jquery.ajax/

Same kind of question answered here: Delete record without refresh page using php

If you having any problem,let me know.

Answer 4

Here is an example of a simple client server communication model. Client codes are executed at the browser which is JavaScript. The Server side codes are PHP, Nodejs, java, python etc) Which resides on server only. Client sends a request to the server for a resource. And server and back a response with an HTTP status. Which represents the status of a response. The client side JavaScript cannot communicate directly with the server database. What it does is sending a request to the server which will eventually trigger the actual code in server which inserts the data into the server.

The one you mentioned is the ajax method which sends an HTTP request without actually reloading a page. You can also use a form to post data into the server without ajax which will reload the page.

You must validate the user inputs in server side even though you will be validating it in the client side.

You can use the event.preventDefault() to prevent the form submit and then insert it via ajax.

$(document).ready(function() {
  $('#save-form').on('submit', function(e){      
      e.preventDefault();
       var data = $("#save-form").serialize();
        $.ajax({
            data: data,
            type: "post",
            url: "save.php",
            success: function(data){
                alert("Data Save: " + data);
            }
        });
  });
});