使用jQuery将表单写入数据库 [英] write form into database by using jquery

问题描述

我有2个按钮.

• 1 =创建字段的
• 2 =创建(写入数据库)

如果我按下创建字段"按钮，则会在更多时间获得此结构:

If i press on the button "Create field's" i get this structure on more time:

<div class="step">
  <div class="header_step">Schritt 1 des Tutorial's</div>
  <div class="body_step">
    <a class="create_tutorial_a">Titel des Schrittes</a>
    <input id="input_title_name0" class="create_tutorial_input">
    <br>
    <a class="create_tutorial_a">Bild</a>
    <input type="file">
    <br><br>
    <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a>
    <br>
    <textarea class="create_tutorial_textarea" id="input_description_name0">
    </textarea>
  </div>
</div>

当我再次按下按钮时，我将再次得到相同的信息.仅输入字段的名称会更改.我是用Jquery做到的.

When i press the button again, i will get the same again. Just the name's of the input field will change. I did this with Jquery.

此后，我按下创建"按钮.现在，我想将字段的值写入我的数据库.我的表格如下所示:

After this i press the button "create". Now i want to write the value's of the field's into my database. My Form look like this:

<form method="post" action="index.php?content=create_tutorial" id="form1">
  
  <div class="step">
    <div class="header_step">Schritt 1 des Tutorial's</div>
    <div class="body_step">
      <a class="create_tutorial_a">Titel des Schrittes</a>
      <input id="input_title_name0" class="create_tutorial_input">
      <br>
      <a class="create_tutorial_a">Bild</a>
      <input type="file">
      <br><br>
      <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a>
      <br>
      <textarea class="create_tutorial_textarea" id="input_description_name0">
      </textarea>
    </div>
  </div>
  
  <div class="step">
    <div class="header_step">Schritt 1 des Tutorial's</div>
    <div class="body_step">
      <a class="create_tutorial_a">Titel des Schrittes</a>
      <input id="input_title_name1" class="create_tutorial_input">
      <br>
      <a class="create_tutorial_a">Bild</a>
      <input type="file">
      <br><br>
      <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a>
      <br>
      <textarea class="create_tutorial_textarea" id="input_description_name1">
      </textarea>
    </div>
  </div>
  
  
  
  <div class="step">
    <div class="body_step">
      <input class="create_button" id="submit" value="Erstellen" type="button">
      <input class="create_button" id="add_step" value="Schritt hinzufügen" type="button">
      <input class="create_button" id="remove_step" value="Schritt entfernen" type="button">
    </div>
  </div>
  
</form>

我现在如何将该表格发送到我的.php页面，在那里我会将所有数据放入数据库中?

How can I send this form now to my .php page, where I will put the whole data into my database?

$.ajax({
    type: "post",
    url: "url",
    data: $("form").serialize(),
    success: function(data) {
       alert("success")
    }
})

我有此代码，但我不知道如何使用它.什么是成功& 数据?也许有人可以帮助我.

I have this code, but I dont know how to use it. What is success & data? Maybe someone of you can help me.

推荐答案

我现在如何将该表格发送到我的.php页面，我将在其中 全部数据存入我的数据库?

How can I send this form now to my .php page, where I will put the whole data into my database?

您已将表单方法配置为POST，并且将属性action = "index.php?content=create_tutorial"配置为要对发送的数据执行某些操作的端点或脚本.

You have configured your form method as POST and you the attribute action = "index.php?content=create_tutorial"which is the endpoint or script that you are calling to do something with the data sent.

因此，提交时，index.php应该使用php全局变量

So, on submit, index.php should received the POST data using php global variable $_POST.

为简化示例，下面的表单在一个表单中使用POST并将操作设置为端点来输入一个文本.

To simplify the example, the following form has one text input in a form using POST and action set as your endpoint.

HTML

<form method="post" action="index.php?content=create_tutorial">
  <input type="text" name="name"/><br>
  <input type="submit"/>
</form>

PHP

// index.php
<?php 
  $name = $_POST['name'];
  echo $name;
?>

PHP-MYSQL

// assuming connection to database is configured and setup done
$query = "INSERT INTO `user` (`name`) VALUES ($name)";
mysql_query($query);

注意: -了解有关安全性和验证用户输入的更多信息此处并已弃用中阅读有关插入数据库的信息(假设使用MySQL) mysql_query()

Notes: - read more about security and validating user input here - take note of the attribute name value is the key to $_POST. - read about inserting database (assuming MySQL) here and deprecated mysql_query()

我有此代码，但我不知道如何使用它.什么是成功与成就? 数据?也许有人可以帮助我.

I have this code, but I dont know how to use it. What is success & data? Maybe someone of you can help me.

$ .ajax()是一种异步发出HTTP请求的方法.在维基百科

$.ajax() is a method to make HTTP requests asynchronously. Read more here on Wikipedia

• async = true，就是说完成后让我知道，我将做其他事情"
• async = false只是说:我会在做其他事情之前等你"

默认情况下，$.ajax()异步标志设置为true.因为它实现了 Promise 接口，所以它为您提供了功能像

By default, $.ajax() async flag is set to true. Because it implements the Promise interface,it provides you functions like

自jQuery 1.5.1起

• .done()响应成功后，将调用此函数.
• .fail()出现错误响应时，将调用此函数.
• ..更多$.ajax()文档

• .done() when there is a successful response, this function will be called.
• .fail() when there is an error response, this function will be called.
• .. more in $.ajax() documentation

.php

// index.php
<?php
  return "ok";
?>

.js

var jqxhr = $.ajax( "example.php" )
     .done(function(results) {
       alert(results); // "ok"
     })
     .fail(function(error) {
       alert( error ); // "failed"
     })

弃用通知:jqXHR.success()，jqXHR.error()和 从jQuery 1.8开始不推荐使用jqXHR.complete()回调.准备 您的代码要最终删除，请使用jqXHR.done()，jqXHR.fail()， 和jqXHR.always()代替.

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

希望这会有所帮助.

这篇关于使用jQuery将表单写入数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！