使用JavaScript或AJAX从HTML表单中提取数据，然后将其传递给PHP

我有一个我似乎无法解决的问题，我有一个带有一堆文本字段的表单，但我需要通过AJAX或一个简单的JavaScript函数来提取它们的信息。我需要将这些数据提取出来，一个字符串一个字符串地提取到一个数组中，然后将该数组传递给PHP。如果理解正确，AJAX可以与JQuery或JavaScript一起使用，现在我不确定我是否非常理解JQuery。不管怎样，我一直在谷歌搜索好的例子，但我真的找不到好的

<form class="registration" method="POST">
                <ul class="registration">
                    <li><label>Nombre de Usuario:</label></li>
                    <li><input type="text" name="username" title="Nombre de Usuario"/></li>
                    <li><label>Contrase&ntilde;a:</label></li>
                    <li><input type="text" name="password" title="Contrase&ntilde;a"/></li>
                    <li><label>Correo Electr&oacute;nico:</label></li>
                    <li><input type="text" name="email" title="Correo Electr&oacute;nico"/></li>
                    <li><label>Nombre:</label></li>
                    <li><input type="text" name="name" title="Nombre"/></li>
                    <li><label>Primer Apellido:</label></li>
                    <li><input type="text" name="first last name" title="Primer Apellido"/></li>
                    <li><label>Segundo Apellido:</label></li>
                    <li><input type="text" name="second last name" title="Segundo Apellido"/></li>
                    <li><input type="submit" name="create user" title="Crear Usuario" value="Crear Usuario"></input></li>
                </ul>
            </form>

这是我的表格，有些价值观是用西班牙语写的，我要建立的网站必须是用西班牙语写的。如果我理解正确，我应该通过单击提交输入按钮来调用我想要的函数。这是我第一次做web开发，理解CSS和HTML对我来说很困难。我想知道是否有人能帮我举个例子或什么。我基本上是用MVC来组织这个，HTML和JavaScript作为视图，PHP作为控件，Oracle SQL作为模型。我使用PHP正是出于这个原因，我需要连接到数据库，并通过PHP发送信息

我不想找任何人来修理我的东西或类似的东西，我所需要的只是一个例子和一个小的解释，如果可能的话

请试一试

$(document).ready(function(){
    $('input[type="submit"]').click(function(e){
        e.preventDefault();
        $.ajax({
          url: "YOUR_URL",
          type: 'POST',
          data:$("form#registration").serialize(),
          success: function( response ) {
            console.log(response);
          }
        });
    });
});

---

您需要了解$.ajax函数。它很容易实现，并将值发布到您的php文件中，然后从那里您可以处理将数据插入数据库的操作。下面是代码示例：

        $('input[type=submit]').on('click',function(e)
        {
             e.preventDefault();

             var my_username = $('input[name=username]').val();
             .....
             ..... more here 

              $.ajax({
                  type : 'POST', //<--- GET or POST
                  url  : 'url_of_insert_process.php',
                  data : { 
                           username: my_username,
                           .....
                           ..... more here
                         }
                  success : function(data){
                     // Here you can populate the view whatever you want 
                     // like showing message success
                  }
                });

       });

---

这是发送数据的图示。您还可以使用$form.serialize；使用在每个html表单元素上提供的名称获取所有表单元素值。有太多的源代码可以放在表中。

如果这是您第一次进行web开发，我会先离开AJAX，直到您掌握了基本知识并暂时使用普通格式的post。将表单标签设置为“我理解”，但我真的没有选择，我必须使用它。除此之外，有人告诉我，如果不使用它，我会得到很多可能不必要且令人困惑的文件和页面。如果有人告诉你必须使用它，那就好了。然而，我强烈不同意关于杂乱的说法。同样，如果告诉你的人告诉你，你做事的方式是MVC，那么我也会质疑。Oracle数据库并不是一个真正的模型。一个真正的模型应该是一个表示数据库中存储的实体的类不，那个人没有告诉我，但是如果你说的是真正的模型表，我会看看它是如何工作的。不管怎样，我在这件事上没有选择，我将不得不使用它。我可以告诉你，这个人不像我那样编程，我真的不知道他是怎么做的。不管怎样，这不是我第一次必须学习超出我水平的东西，最后一次是NASM，我必须自己学习，因为我的教授自己都不知道。这似乎是我在寻找的东西。我想我会弄明白的，但我明白了。谢谢你的例子。我不知道为什么这些ppl否决票，即使我的代码是相似的，并且是先给出的。羞耻

//jsfile.js
//THIS METHOD RETURN THE name : value PAIR FROM
//A SPECIFIED FORM ID OR FORM IN THE CURRENT SPHERE
function formHandler(formID="") {
    try {
        if (formID === "") {
            //PICK UP THE FORM IN THE CURRENT SPHERE
            formElms  document.querySelectorAll("input,select,textarea");
        } else if(formID !== "") {
            //PICK UP THE NAMED FORM
            var formsElms = document.querySelectorAll("form");
            formsElms.forEach(function(formElm) {
                if (formElm.id === formID) {
                    formElms = document.querySelectorAll("#"+formID+" input, #"+formID+" select, #"+formID+" textarea");
                }
            });
        }
        if (formElms) {
            var retObjs = new Array();
            if (formElms) {
                formElms.forEach(function(param) {
                    retObjs.push({name : param.name, value: param.value});
                });
            }
        }
        return retObjs;
    } catch (e) {
        console.log(e);
    }
}

serverSideHandler(inda={}) {
    try {
        indata   = inda;
        complUrl = "url.php";
        $.ajax({
            method: "POST",
            url: complUrl,
            data: indata
        })
        .done(function(retData) {
            serverResponseHandler(retData);//Function To Callback
        });
    } catch(ev) {
        console.log(ev);
    }
}


//url.php
<?php
  header("Access-Control-Allow-Origin: *");
  header('Content-Type: text/json');
  ini_set('memory_limit','1024M');

  if (!empty($_POST)) {
    //Extract your form Inputs as follow
    $name = doSomeValidation($_POST['name']);

    //Do DB connections
    //Do your CRUD
    //DO OTHER ACTIONS
  }