Question

我有一个我似乎无法解决的问题，我有一个包含大量文本字段的表单，但我需要通过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>

这是我的表格，其中一些值是西班牙语，我应该制作的网站必须使用该语言。如果我理解正确的话，我应该通过我的提交输入按钮用“OnClick”调用我想要的功能。这是我第一次完成Web开发，对我来说理解CSS和HTML很困难。我想知道是否有人可以用一个例子或其他东西来帮助我。我基本上使用MVC来组织这个，使用HTML和JavaScript作为视图，PHP作为控件，Oracle SQL作为模型。因为这个原因，我正在使用PHP，我需要连接到数据库，并通过PHP发送信息。

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

Answer 1

你需要找出$ .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表单元素上提供的名称来获取所有表单元素值。你可以把很多资源放到你的桌子上。

Answer 2

请尝试

$(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);
          }
        });
    });
});

Answer 3

//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
  }

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

3 个答案: