Question

我觉得我可能只有90％左右，只需要一些帮助，最后10％。我已经看了很多不同的例子，并尝试拼凑出一个解决方案，但还没有想出来，所以我正在寻找一些指导。

我有一个小的html页面，有一个小的javascript，以及一个简短的.php，它将收到的数据添加到数据库中。

我可以看到代码进入了ajax函数，然后进入了insert函数。但它实际上并没有插入。我怀疑它永远不会将数据发送到php文件，但我肯定不知道。

这是html代码：

package mehavenowebsite;

import org.lwjgl.Sys;
import org.lwjgl.glfw.*;
import org.lwjgl.opengl.*;

import java.nio.ByteBuffer;

import static org.lwjgl.glfw.Callbacks.*;
import static org.lwjgl.glfw.GLFW.*;
import static org.lwjgl.opengl.GL11.*;
import static org.lwjgl.system.MemoryUtil.*;

public class DoStuff {

// We need to strongly reference callback instances.
private GLFWErrorCallback errorCallback;
private GLFWKeyCallback   keyCallback;

// The window handle
private long window;

public void run() {
    System.out.println("Hello LWJGL " + Sys.getVersion() + "!");

    try {
        init();
        loop();

        // Release window and window callbacks
        glfwDestroyWindow(window);
        keyCallback.release();
    } finally {
        // Terminate GLFW and release the GLFWerrorfun
        glfwTerminate();
        errorCallback.release();
    }
}

private void init() {
    // Setup an error callback. The default implementation
    // will print the error message in System.err.
    glfwSetErrorCallback(errorCallback = errorCallbackPrint(System.err));

    // Initialize GLFW. Most GLFW functions will not work before doing this.
    if ( glfwInit() != GL11.GL_TRUE )
        throw new IllegalStateException("Unable to initialize GLFW");

    // Configure our window
    glfwDefaultWindowHints(); // optional, the current window hints are already the default
    glfwWindowHint(GLFW_VISIBLE, GL_FALSE); // the window will stay hidden after creation
    glfwWindowHint(GLFW_RESIZABLE, GL_TRUE); // the window will be resizable

    int WIDTH = 300;
    int HEIGHT = 300;

    // Create the window
    window = glfwCreateWindow(WIDTH, HEIGHT, "Hello World!", NULL, NULL);
    if ( window == NULL )
        throw new RuntimeException("Failed to create the GLFW window");

    // Setup a key callback. It will be called every time a key is pressed, repeated or released.
    glfwSetKeyCallback(window, keyCallback = new GLFWKeyCallback() {
        @Override
        public void invoke(long window, int key, int scancode, int action, int mods) {
            if ( key == GLFW_KEY_ESCAPE && action == GLFW_RELEASE )
                glfwSetWindowShouldClose(window, GL_TRUE); // We will detect this in our rendering loop
        }
    });

    // Get the resolution of the primary monitor
    ByteBuffer vidmode = glfwGetVideoMode(glfwGetPrimaryMonitor());
    // Center our window
    glfwSetWindowPos(
        window,
        (GLFWvidmode.width(vidmode) - WIDTH) / 2,
        (GLFWvidmode.height(vidmode) - HEIGHT) / 2
    );

    // Make the OpenGL context current
    glfwMakeContextCurrent(window);
    // Enable v-sync
    glfwSwapInterval(1);

    // Make the window visible
    glfwShowWindow(window);
}

private void loop() {
    // This line is critical for LWJGL's interoperation with GLFW's
    // OpenGL context, or any context that is managed externally.
    // LWJGL detects the context that is current in the current thread,
    // creates the ContextCapabilities instance and makes the OpenGL
    // bindings available for use.
    GLContext.createFromCurrent();

    // Set the clear color
    glClearColor(1.0f, 0.0f, 0.0f, 0.0f);

    // Run the rendering loop until the user has attempted to close
    // the window or has pressed the ESCAPE key.
    while ( glfwWindowShouldClose(window) == GL_FALSE ) {
        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // clear the framebuffer

        glfwSwapBuffers(window); // swap the color buffers

        // Poll for window events. The key callback above will only be
        // invoked during this call.
        glfwPollEvents();
    }
}

public static void main(String[] args) {
    new DoStuff().run();
}

}

这是php

    <html>
    <head>
        <script type ="text/javascript" language="javascript">
            function ajaxFunction(){
                var ajaxRequest;
                    alert("enter ajax"); //just a testing line
                try{
                    ajaxRequest = new XMLHttpRequest();
                } catch (e) {
                    try {
                        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                            alert("Your browser broke!");
                            return false;
                        }
                    }
                }

            ajaxRequest.onreadystatechange = function(){
                if(ajaxRequest.readyState == 4){
                    var ajaxDisplay = document.getElementById('responseDiv');
                    ajaxDisplay.innerHTML = ajaxRequest.responseText;
                        }
                }

                alert("enter insert");  //just for testing
                var type = $('#type').val();
                var vintner = $('#vintner').val();

                var myData = {"type": type, "vintner": vintner,};

                $.ajax({
                    url: "bottleAdd.php",
                    type: "POST",
                    data: "myData",
                    success: function(data, status, xhr)
                    {
                        $("$bottleAdd").html(data);
                        $("type").val();
                        $("vintner").val();
                        }
                });
            }

        </script>

        <title>Simple Add</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div id="addBottle">
            <table>
                <tr>
                    <td>Type: <input type="text" id="type" /></td>
                    <td>Vintner: <input type="text" id="vintner" /></td>
                </tr>
                <tr>
                    <td><button onClick="ajaxFunction()">Save Bottle Now</button></td>
                </tr>
            </table>
        </div>
        <div id="responseDiv">Response will appear here</div>
    </body>
</html>

我知道php中有一些事情要做（例如防止sql注入）。但是现在，我不太关心这一点，更多的是关于如何确定如何正确运行。

任何帮助都将不胜感激。

谢谢。

Answer 1

您将简单的JS AJAX与jQuery's ajax包装器混合在一起。

将您的代码更改为以下内容：

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple Add</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type ="text/javascript" language="javascript">
        var type = $('#type').val();
        var vintner = $('#vintner').val();
        var myData = {"type": type, "vintner": vintner};
        $.ajax({
            url: "bottleAdd.php",
            type: "POST",
            data: myData,
            success: function(data) {
                $("#responseDiv").html(data);
            }  
        });
    </script>
</head>

其余的没有变化。

这样你就可以使用jQuery AJAX了。

顺便说一下，将元标记放在头标记的开头是一个好习惯，因为像charset这样的标记会导致浏览器从头开始再次读取页面。

Answer 2

您混合了XHR的两个调用方法 - 本机方法和jQuery方法。如果您使用创建本机xhr对象的本机方法，则应仅使用保留本机XHR对象的ajaxRequest变量进行操作。解决方案是删除使用

的代码

$.ajax

并且，在定义onstatechange事件之后，添加您的请求参数，并最终发送您的xhr。所以：

function ajaxFunction() {
        var ajaxRequest;
        try {
            ajaxRequest = new XMLHttpRequest();
        } catch (e) {
            try {
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("Your browser broke!");
                    return false;
                }
            }
        }

        ajaxRequest.onreadystatechange = function () {
            if (ajaxRequest.readyState === 4) {

                var data = ajaxRequest.responseText;
                console.log(data);
                // do something with response data...
            }
        }

        var type = 'atype';
        var vintner = 'avintner';


        var formData = new FormData();
        formData.append("type", type);
        formData.append("vintner", vintner);
        ajaxRequest.open('POST', 'bottleAdd.php', true); 
        ajaxRequest.send(formData);

    }

应该有用。

Answer 3

试试这个：您可能错误地使用此代码"mydata"它更改为mydata ..

查看控制台中的结果。

＆＃13;

  function ajaxFunction() {
    var ajaxRequest;
    alert("enter ajax"); //just a testing line
    try {
      ajaxRequest = new XMLHttpRequest();
    } catch (e) {
      try {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          alert("Your browser broke!");
          return false;
        }
      }
    }

    ajaxRequest.onreadystatechange = function() {
      if (ajaxRequest.readyState == 4) {
        var ajaxDisplay = document.getElementById('responseDiv');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
    }

    alert("enter insert"); //just for testing
    var type = $('#type').val();
    var vintner = $('#vintner').val();

    var myData = {
      "type": type,
      "vintner": vintner,
    };

    $.ajax({
      url: "http://stackoverflow.com/index.php",
      type: "POST",
      data: myData,
      success: function(data, status, xhr) {
        $("$bottleAdd").html(data);
        $("type").val();
        $("vintner").val();
      }
    });
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>

<head>

  <title>Simple Add</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div id="addBottle">
    <table>
      <tr>
        <td>Type:
          <input type="text" id="type" />
        </td>
        <td>Vintner:
          <input type="text" id="vintner" />
        </td>
      </tr>
      <tr>
        <td>
          <button onClick="ajaxFunction()">Save Bottle Now</button>
        </td>
      </tr>
    </table>
  </div>
  <div id="responseDiv">Response will appear here</div>
</body>

</html>

＆＃13;

使用ajax和php将数据插入MySQL

3 个答案: